Jump to content
GreenSock

sscash

Scroll Trigger Question

Recommended Posts

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?

Link to comment
Share on other sites

 

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

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×