Making my stagger timeline animation more fluid

[Jaydev12]

I'm new to gsap animations, and I just wanted to know if someone could provide a more efficient way to code this animation, and make it more fluid, I've been playing around with it and trying to make this stagger animation more fluid. But I haven't been able to do so, it comes out so flat, and it hurts me because I know there's ways to make this a lot more fluid. I appreciate any help given to me.

See the Pen OJRgNLm by jaydev12 (@jaydev12) on CodePen

[mvaneijgen]

Hi @Jaydev12 I almost never use `.fromTo` because most of the animations already are at there end position, so I just want to start `.from` to where they already ar now, this makes your code a lot more readable. 

 

Also you can animate multiple items at the same time by creating an array `[item1, item2, ...ect]` from them if you do this the `stagger:` property works you can find more on this here . And if you are happy with your timeline I would sprinkle in some eases, you can find inspiration for that in the Ease Visualizer

 

Here is a pen with some of my tweaks 

 

See the Pen abmwBQd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[ZachSaucier]

3 hours ago, mvaneijgen said:

I almost never use `.fromTo` because most of the animations already are at there end position, so I just want to start `.from` to where they already ar now, this makes your code a lot more readable. 

That's one of the tips to animate efficiently, though .fromTo()s definitely have their use cases  

 

3 hours ago, mvaneijgen said:

you can animate multiple items at the same time by creating an array `[item1, item2, ...ect]`

That's true! But if they're a bunch of selector strings it probably makes more sense to use a single selector string (it will perform very slightly faster):

// replace this
[".nav-link1", ".nav-link2", ".nav-link3"]
// with this
".nav-link1, .nav-link2, .nav-link3"

My only other suggestion is that you can leave off the .out for your eases since that's the default if you'd like to.

 

Good answer, mvaneijgen! Thanks for contributing.

[akapowl]

 

On the perceived fluidity of your staggering:

 

When the duration of a staggered tween is set to 0.2 and the stagger also to 0.2, the next element will start animating, when the first has finished. If you want it to be perceived as more fluent, you would have to decrease the stagger.

 

In this following example it seems a bit extreme, since I decreased the staggers to half the amount of the animations, but it definitely feels more fluent.

 

Also, because you have a timeline with several other tweens, that should supposedly have the same feel of 'fluid staggering', what you would want to to is adjust the position parameter of those tweens. How exactly to do that, depends on the exact feel you want to have - that could be something like starting the same duration as the stagger-amount or the animation-duration before the last tween ends, or halfway into the last tween - whatever feels good to you.

 

See the Pen 25788987ced455cc2d6ee2bd5263103c by akapowl (@akapowl) on CodePen

 

You'll find more about the position parameter in the docs.

 

 

[Jaydev12]

Thank you guys so much for the help! Highly appreciated