nvassalo Posted February 6, 2022 Share Posted February 6, 2022 Hi I'm running this very simple stagger animation, where I switch between 2 values on x by passing it a function, which was a common technique in gsap since ever. I noticed the animation behaves unpredictably and the staggers aren't linear, and seems it running 3 times and logging these their index values all over… I know i can use gsap.utils.wrap for this case, but this will be a common pattern in my GSAP animations and this left me wondering if somehow I'm messing up the way I should connect my GSAP animations to Svelte? Here's a Svelte REPL with the example:https://svelte.dev/repl/2add39882b9748758f2f8de72701cf0e?version=3.46.4 Link to comment Share on other sites More sharing options...
GreenSock Posted February 7, 2022 Share Posted February 7, 2022 It's actually entirely normal for the "from" part of a ".fromTo()" to fire multiple times. The first time is the immediateRender, but that intentionally doesn't initialize the tween because its playhead hasn't moved yet past 0 and there are some edge cases that could cause odd behavior if it doesn't re-render that "from" state at the very first "official" render (beyond the immediateRender). That's why it fires at that point too. It should be totally inconsequential from a real-world performance standpoint. If you just want to set them up initially in an alternating way like that, you can simply do a .set() and THEN do a plain .to() in your timeline: // a plain .set() that's NOT in your timeline gsap.set(".values li", { xPercent: i => i % 2 ? 150 : -150 }); // a standard .to() goes into your timeline heroTL.to(".values li", { x:0, duration: 3.25, ease: "expo.inOut", stagger: 0.75 }); Notice I'm using xPercent instead of x - that's a common mistake people make is using something like x: "150%" instead of xPercent: 150. See You mentioned that the animation behaves "unpredictably" - can you please explain? I didn't notice anything like that, but maybe I missed something obvious. The same goes for the staggers not being linear. You've got the ease set to expo.inOut, so it shouldn't be linear but did you mean the time between the start of each staggered tween? Again, I'm not seeing any problems at all but perhaps I'm missing it. 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