perfecti Posted February 1, 2022 Share Posted February 1, 2022 Hello, I don't understand how to make different animations for the enter and leave of an element. Now I commented out onLeaveBack, otherwise, if you scroll quickly, the animations start to interrupt each other. Oh onEnter animation too How to solve such problems correctly? See the Pen YzEwdxR by Speculant (@Speculant) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 1, 2022 Solution Share Posted February 1, 2022 It all depends on what behavior you want exactly (you could build this several different ways) but I'd probably just create those tweens dynamically and set overwrite: true (or "auto"). One of the problems in the way you've got it structured is that you're pre-creating just two timelines that will lock in their starting/ending values, thus they're not dynamic. So, for example, if you scroll quickly and some of the animations are halfway done but now you want those same elements to go to a different end value that's controlled by a different animation instance which you then .restart(), the values will jump. That's not a bug - it's a logic issue in the way you've got it coded. So I'd do something sorta like: onEnter: () => { gsap.to(".targets", {..., overwrite: true}); }, onLeave: () => { gsap.to(".targets", {..., overwrite: true}); }, ... That way, it's totally dynamic and the animations will pick up exactly where the other left off. 1 Link to comment Share on other sites More sharing options...
perfecti Posted February 2, 2022 Author Share Posted February 2, 2022 18 hours ago, GreenSock said: So I'd do something sorta like: Thank you, now it really works as it should, though a bit of a difficult way 18 hours ago, GreenSock said: That's not a bug - it's a logic issue in the way you've got it coded. Yes, I understand that gsap was just doing his job, it's just that sometimes it's not clear how to do such things correctly Link to comment Share on other sites More sharing options...
perfecti Posted February 2, 2022 Author Share Posted February 2, 2022 And somehow you can adapt it to the timeline or animation of each element, you need to write it inside onEvents? Link to comment Share on other sites More sharing options...
GreenSock Posted February 2, 2022 Share Posted February 2, 2022 I don’t understand what you mean. Can you please explain? Why would you need a timeline? Link to comment Share on other sites More sharing options...
perfecti Posted February 2, 2022 Author Share Posted February 2, 2022 15 minutes ago, GreenSock said: I don’t understand what you mean. Can you please explain? Why would you need a timeline? For example, if I need to animate not one element, as in the example above, but several different ones in a certain sequence Link to comment Share on other sites More sharing options...
GreenSock Posted February 2, 2022 Share Posted February 2, 2022 Sure, if you're just staggering them (same animation for all, just offset), you can simply use a "stagger" on a single tween. No need for a timeline. But yes, if you need to animate various things differently, you can absolutely use a timeline that you create in the callback(s). Just make sure you set overwrite: true (or "auto") on the tweens to ensure you don't create conflicts. onEnter: () => { let tl = gsap.timeline({defaults: {overwrite: true}}); tl.to(...).to(...)... } If you're still struggling, please provide a minimal demo and we'd be happy to take a peek. Good luck! 1 Link to comment Share on other sites More sharing options...
perfecti Posted February 2, 2022 Author Share Posted February 2, 2022 8 hours ago, GreenSock said: Sure, if you're just staggering them (same animation for all, just offset), you can simply use a "stagger" on a single tween. No need for a timeline. But yes, if you need to animate various things differently, you can absolutely use a timeline that you create in the callback(s). Just make sure you set overwrite: true (or "auto") on the tweens to ensure you don't create conflicts. oh thanks, i tried creating it outside of the callback 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