Jump to content
GreenSock

dhaliwallambi

Members
  • Posts

    6
  • Joined

  • Last visited

Posts posted by dhaliwallambi

  1. In my Portfolio, I'm using the ScrollTrigger with Locomotive Scroll, (The code is below). I'm a newbie in JS. So, When  I try to use batch method, locomotive scroll and everything with scrolltrigger breaks. It would be great if you can write some syntax for me (Just the batch method).

     

    Codepen: 

    See the Pen qBNedNK by SahiljeetSingh (@SahiljeetSingh) on CodePen

     (I don't know why it isn't working on codepen, but this syntax (without batch method) works on my computer).

     

     

    gsap.registerPlugin(ScrollTrigger);
    
    // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
    
    const locoScroll = new LocomotiveScroll({
      el: document.querySelector(".data-scroll-container"),
      smooth: true,
      smoothMobile: true
    });
    // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
    locoScroll.on("scroll", ScrollTrigger.update);
    
    // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things
    ScrollTrigger.scrollerProxy(".data-scroll-container", {
      scrollTop(value) {
        return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
      }, // we don't have to define a scrollLeft because we're only scrolling vertically.
      getBoundingClientRect() {
        return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
      },
      // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
      pinType: document.querySelector(".data-scroll-container").style.transform ? "transform" : "fixed"
    });
    
    let exptl = gsap.timeline({
      scrollTrigger:{
        trigger: ".z-out",
        start: "top 85%",
        end: "top 5%",
        scrub: 2,
        markers: true
      }
    });
    exptl.from(".z-out", {
      x: 100,
      opacity: 0,
      duration: 1
    });
    
    
    // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
    ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
    
    // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
    ScrollTrigger.refresh();

     

  2. Hello,

     

    I want to animate images with same class when each of them enter the viewport. I've 5 images in my codepen each with a class 'z-out'.

     

    My JS is

    let exptl = gsap.timeline({
      scrollTrigger:{
        trigger: ".z-out",
        start: "top 85%",
        end: "top 5%",
        stagger: 1,
        scrub: 2,
        markers: true
      }
    });
    exptl.from(".z-out", {
      x: 100,
      opacity: 0,
      duration: 1
    });

     

    The problem is when the 1st image enters the viewport, the animation happens for all the images. So, When I scroll further animation is already occured.

     

    I'm using this for my portfolio, I want to animate the some images with a common class when each enter the viewport. I don't want to create multiple classes and a tweens for each of them.

     

    Codepen: 

     

    See the Pen qBNedNK by SahiljeetSingh (@SahiljeetSingh) on CodePen

  3. Hello Guys,

     

    I found this codepen, I wanna use this effect on the links in my portfolio but the problem is I don't want my link to be enclosed further in an element. I don't want to create an extra div enclosing my link like this codepen has.

     

    I don't want this:

    <div class="container">
      <div class="circle"> Hover</div>
    </div>

     

    I want this:
      <div class="circle"> Hover</div>

     

    Regards,

     

     

    Codepen: 

    See the Pen pobRYqj by SahiljeetSingh (@SahiljeetSingh) on CodePen

  4. Codrops has many examples but it's way complex for me.

    Can we change or assign empty img tag a class. So, that the script does not affect other img tags in html.

    If we assign a class "image-reveal" to that empty img tag and add that class to the code in css, But I don't know how to make changes in JavaScript and replace the img tag with a img tag with specific class.

  5. Hello Guys,

    I want to know to get this effect. Many websites have these. When we hover on a piece of text, images pop-up and when we move away from text, they disapper.

    Well, the major drawback for me is that I don't know the javascript at all! But I'm great at html&css.

    I just want a simple effect, image pop-up and move along as we move the cursor on text. I'm sharing the websites which have these effects.

    I'm including a codepen which has this effect but the problem is, when implement that javascript into my website, it has a part, this on

    const image = document.querySelector('img')  

    This select all the img tag and I don't even why it has an empty img tag in the beginnning of html.

     

     

    It would be great, if you can help me in any way.

     

    https://www.craig-reynolds.com/

    https://normal.studio/en/

     

    Thanks & Have a great day!

    See the Pen rrpzgW by RMKNGY (@RMKNGY) on CodePen

×