mrgreen Posted November 10, 2021 Share Posted November 10, 2021 Hi, I'm having an issue with an animation timeline which doesn't have scrub applied to it as it needs to play at normal velocity when triggered, whilst the previous trigger and the next have scrub applied to them. Basically what happens is that if you scroll fast from a triggered timeline which has scrub applied, to one which doesn't, it might skip it and have the animation without a scrub overlap into the next animation. Is there anything I can do to prevent this? The scrubbed animations work well because they follow the scroll velocity, however when I have an animation without scrub and it's triggered I would need for the user to wait a couple of seconds before scrolling so that the animation completes or else it will continue playing while overlapping into the next trigger. Is there perhaps some way I can set a duration or specific time before the user can continue scrolling to the next trigger? var zoomInTl = gsap.timeline({}); ScrollTrigger.create({ animation: zoomInTl, trigger: ".hero", start: "top top", end: "100%", scrub: true, markers: true }); zoomInTl.to(".hero-container", 1.8, { x: '+=150%', y: '-=10%', scale: 10, ease: "none" }) ; var offerLeftTl = gsap.timeline({}); ScrollTrigger.create({ animation: offerLeftTl, trigger: ".offer-container-left", start: "bottom top", endTrigger: ".offer-container-right", end: "100%", markers: true, toggleActions: "play none none reset" }); offerLeftTl.to(".offer-container-left", 0.5, { autoAlpha: 1, ease: "power1.out"}) .from(".offer-container-left .offer-decoration", 1.5, { y:'-=50%', transformOrigin:"55% 0%", autoAlpha: 0, ease: "elastic.out(0.8, 0.3)" }, '-=1.2') .fromTo(".offer-container-left .offer-decoration", 1.8, { rotation:-3, transformOrigin:"55% 0%" }, { rotation: 3, repeat: -1, yoyo: true, transformOrigin:"55% 0%", ease: "sine.inOut" }, '-=0.24') ; var zoomOutTl = gsap.timeline({}); ScrollTrigger.create({ animation: zoomOutTl, trigger: ".offer-container-right", start: "150%", end: "250%", markers: true, scrub: true }); zoomOutTl.to(".offer-container-left", 0.5, { autoAlpha: 0, ease: "power1.out"}) .to(".hero-container", 1.8, { x:'-=150%', y:'+=10%', scale: 2, ease: "none" }) ; Link to comment Share on other sites More sharing options...
Solution mrgreen Posted November 10, 2021 Author Solution Share Posted November 10, 2021 Was an issue of toggleActions, used toggleActions: "play reset resume reset" to reset the animation onLeave so that it doesn't overlap with the next trigger Link to comment Share on other sites More sharing options...
GreenSock Posted November 10, 2021 Share Posted November 10, 2021 You might also want to look into the "preventOverlaps" and "fastScrollEnd" features from the latest release - see the announcement here: Happy tweening/scrolling! 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