Scroll Trigger Question

[sscash]

Im trying to use the scroll Trigger to animate text but anytime i use the

 

start: 0% 100%; // the text jumps over

start: 0% 110%; // the text scrolls passed, exactly as i wanted.

 

My code example

if (document.querySelector(".span-line")) {
    $(".span-line .span-line-inner").each(function (index) {
      let triggerElement = $(this);
      let targetElement = $(this);

      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: triggerElement,
          toggleActions: "play none none reset",
          start: "0% 100%",
          end: "100% 0%",
          markers: true, 
        },
      });
      if (targetElement) {
        tl.from(targetElement, {
          y: "100%",
          stagger: 0.01,
          ease: "power3.out",
          duration: 1,
          delay: 0,
        });
      }
    });
  }

Please watch the video to understand better.

 

This is when am using the 100% and the text jumps

 

This is when i use the start:110% and the text stays put and looks professional

any advise or fixes?

[akapowl]

 

Hello there @sscash

 

It looks to me like the following is your problem:

 

toggleActions determines how ScrollTrigger is supposed to handle the playstate of your animation onEnter, onLeave, onEnterBack and onLeaveBack - these are the parameters of toggleActions in that order.

 

Now you tell ScrollTrigger to play the timeline onEnter but then onLeaveBack (when your element passes the start when scrolling back up) you tell ST to reset it to what it was before the tween started.

So you will probably want adjust your toggleActions so it doesn't do that.
 

This is from the docs. If it doesn't help, it would be best to put together a minimal demo, that will make it much easier to help.

 

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

 

And here is a codepen demo for better visualiziation of the concept

See the Pen qBrRaeX by GreenSock (@GreenSock) on CodePen