Advanced stagger easing behaviour

[Stefanp]

Hey there! I was going through the stagger docs and I'm confused about advanced stagger easing. 

Why is the advanced stagger easing the opposite of a regular easing outside of an advanced stagger object?

 

When I apply a power3.easeInOut inside a  normal tween, the expected behavior is: Slow (start) - Fast (middle) -  Slow (end).

gsap.to(".box", {
  ease: "power3.inOut",
});

But when this easing is applied to the stagger object I see the reverse and the stagger behavior as Fast (start) - Slow (middle) - Fast (end). 

stagger:{
ease: "power3.inOut",
}

 

 

At first, I thought it was my code, but the same behavior is visible in the greensock stagger documentation when you turn on the "power3.InOut" in the interactive example. 

 

Could someone explain why this is the case and how I could potentially reverse this?

 

Thanks!

[akapowl]

 

Hello @Stefanp

What you are experiencing likely is intended behaviour, as an ease inside the stagger object serves a different purpose compared to an ease directly on the tween object itself - both are valid, but intended to do different things.

I don't know how to explain it in my own words in a better way than it was already done in the Video Explanation in the docs for Staggers, so just in case you missed it, I wanted to point out that the difference is being explained from Timestamp 06:09 on, at the very end of the video.

It would tremendously help understanding what exactly it is you are struggling with, if you could explain in a bit more detail what exactly it is you are trying to achieve alongside a minimal demo that showcases it.

 

 

 

 

 

[Rodrigo]

Hi,

 

Hopefully this examples helps as well:

See the Pen NWEpKdG by GreenSock (@GreenSock) on CodePen

 

Let us know if you have more questions.

Happy Tweening!