sscash Posted September 2, 2022 Share Posted September 2, 2022 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 More sharing options...
akapowl Posted September 2, 2022 Share Posted September 2, 2022 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now