Jump to content
Search Community

Bad performance when using a simple stagger with Scrolltrigger in Svelte

nvassalo test
Moderator Tag

Recommended Posts

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?

image.png.2a4f2b5455aa900723b14ee0d5662386.pngimage.png.ed8dec08568eecd93f2ab8e76081e1aa.png

 

Here's a Svelte REPL with the example:
https://svelte.dev/repl/2add39882b9748758f2f8de72701cf0e?version=3.46.4

 

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...