multiple staggers on one tween

[traile]

Hello, is there a way to have multiple staggers on one tween? for example, I have a tween that animates both position and opacity properties, but I want different stagger values for both properties, how could I accomplish this? something like in the image attached.

[Rodrigo]

Hi,

 

Even though with advanced staggers you can do a lot of stuff, creating different stagger times is not one of those, as far as I know. But the solution is not that complex though, just create another instance that starts at the same time as the other using the position parameter:

tl
  .from(elements, { opacity: 0, stagger: 0.005 })
  .from(elements, { y: 40, stagger: 0.015 }, "<");

Based on the code snippet you posted, that should work as expected.

 

If you keep having issues, please post a simple minimal demo in order to see what could be the problem.

 

Happy Tweening!