KDetected Posted January 6, 2022 Share Posted January 6, 2022 Hi, guys, many thanks for the such amazing tool! I'm trying to figure out how to work with gsap ScrollTrigger, and couldn't find an answer for couple things: 1. When I'm using scrollTrigger and set duration to zero (0), the animation runs immediately when the page loads. However, if I change duration to any positive value (1), it works as expected. Why's that happening? I can set duration to 0.0001 for example, which works well, but I want to understand demo: (On the demo, the square should be green and half-transparent from the initial) 2. On the second demo, the animation plays well for the first time, however if I scroll bottom and back, next changes happens immediately with blink (I tried to set 'once' param to 'true' but it didn't help). Why's that and what's the correct way to achieve animation transition for the second run? Thanks in advance! See the Pen RwLBRaR by KDetected (@KDetected) on CodePen Link to comment Share on other sites More sharing options...
KDetected Posted January 6, 2022 Author Share Posted January 6, 2022 Second demo: See the Pen oNGMLwj by KDetected (@KDetected) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 6, 2022 Share Posted January 6, 2022 Hi KDetected, 1 hour ago, KDetected said: When I'm using scrollTrigger and set duration to zero (0), the animation runs immediately when the page loads. A 0 duration tween is the same thing as set. There is no animation, so it's the same as this. .set(".b", { backgroundColor: "red" }) Also, it might worth checking out this article to understand how from animations work. The second demo, you control the behavior with toggleActions. Quote 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". I would also recommend creating your ScrollTrigger in the timeline. I moved the box down a bit so you can see. See the Pen MWEBjqy by GreenSock (@GreenSock) on CodePen lkjhkjkl 3 Link to comment Share on other sites More sharing options...
KDetected Posted January 7, 2022 Author Share Posted January 7, 2022 @OSUblake thanks for explaining! Just still can't realize why animation transition time affects on animation delay, as changing transition time to zero shouldn't move the animation to the start of queue, shouldn't it? Link to comment Share on other sites More sharing options...
OSUblake Posted January 7, 2022 Share Posted January 7, 2022 4 hours ago, KDetected said: Just still can't realize why animation transition time affects on animation delay, as changing transition time to zero shouldn't move the animation to the start of queue, shouldn't it? I'm not sure what you mean by this. Can you explain what you are trying to accomplish? Link to comment Share on other sites More sharing options...
KDetected Posted January 8, 2022 Author Share Posted January 8, 2022 13 hours ago, OSUblake said: I'm not sure what you mean by this. Can you explain what you are trying to accomplish? Sorry, I mean, when using scrollTrigger, I want the animation to run only after page is scrolled to it. And it works fine when duration is set to almost zero small value (like, 0.001). But if I set the duration to 0, it runs immediately after the page loads like there's no scrollTrigger condition at all Link to comment Share on other sites More sharing options...
GreenSock Posted January 8, 2022 Share Posted January 8, 2022 Yes, as far as I can tell, it's working as expected. As the docs say, tweens with a ScrollTrigger applied will have immediateRender set to true in order to maximize performance (start/end values get locked & loaded and ready to fire immediately when the scroll position is hit). And immediateRender is set to true by default for .fromTo() tweens as well. So if you don't want that behavior, simply set immediateRender: false. As for playing forward and rewinding when scrolling the opposite direction, the problem with a zero-duration tween is that the starting time is exactly on top of the ending time, so they're simultaneous. Think about the scroll like it's scrubbing the playhead backwards or forwards...if you have a zero-duration tween, there's literally nowhere for the playhead to move! Both the start and end are identical. So I'd recommend giving your tween at least a small duration, even if it's imperceptible (0.001). Does that answer your question? 1 Link to comment Share on other sites More sharing options...
KDetected Posted January 8, 2022 Author Share Posted January 8, 2022 12 hours ago, GreenSock said: Does that answer your question? About blinking, I tried immediateRender set to false, but it didn't do the trick See the Pen zYEJBZy by KDetected (@KDetected) on CodePen About the zero timing, I'd just think on it as of some kind of special exception, thank you Link to comment Share on other sites More sharing options...
GreenSock Posted January 8, 2022 Share Posted January 8, 2022 2 hours ago, KDetected said: About blinking, I tried immediateRender set to false, but it didn't do the trick Oh, that's because you're making one of the most common mistakes - you NESTED a scrollTrigger in a tween that's INSIDE a timeline rather than putting the ScrollTrigger on the timeline itself. It logically can't work that way - either the timeline controls the playhead -OR- the scroll position does. It cannot be both because they'd conflict. See the Pen ExwegzW?editors=1010 by GreenSock (@GreenSock) on CodePen Does that clear things up? 2 Link to comment Share on other sites More sharing options...
KDetected Posted January 9, 2022 Author Share Posted January 9, 2022 10 hours ago, GreenSock said: Does that clear things up? It is, thanks so much!! So if I understood correctly, scrollTrigger should be defined in the timeline (gsap.timeline({scrollTrigger:...})) either it should be just gsap.to({scrollTrigger:..}) Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 10, 2022 Solution Share Posted January 10, 2022 20 hours ago, KDetected said: So if I understood correctly, scrollTrigger should be defined in the timeline (gsap.timeline({scrollTrigger:...})) either it should be just gsap.to({scrollTrigger:..}) Right, if you're using a timeline, the ScrollTrigger should be on that. If you're just doing a simple tween (not nested in a timeline), you can just put the ScrollTrigger on the tween itself. 👍 1 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