Ease the whole stagger animation

[Nicolaseliell]

Hey, Is there a way to add an ease for the whole splitText stagger animation without applying the ease for the individual characters inside a gsap.to()? If I add ease: "Power3.easeInOut" inside the gsap.to({}) object it adds the ease to the characters individually but I would need the whole stagger animation to follow the bezier curve. Is this possible to do with GSAP?

 

gsap.to(splitText.chars, {
  scale: 1,
  opacity: 1,
  duration: .3,
  ease: 'Power3.easeInOut' // This adds the ease to individual characters which I don't want
  stagger: {
    amount: 1.3,
    from: 'end',
  }
})

 

[mvaneijgen]

Have you tried putting the ease on the stagger? The stagger object has its own ease property! Check it out from the docs https://gsap.com/resources/getting-started/Staggers

Quote

Ease

[String | Function]: The ease that distributes the start times of the animations. So "power2" would start out with bigger gaps and then get more tightly clustered toward the end. Default: "none".

 

Please include a demo with your question, so that we can directly dive in to the code! Also it seems like the way you write the eases are from the v2 or even v1 version of GSAP, they probably still work, but better to use the up to date syntax to prevent confusion https://gsap.com/docs/v3/Eases/

 

Hope it helps and happy tweening! 

 

See the Pen dyrywpJ?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Nicolaseliell]

I got the ease to the stagger sequence but another problem occured: When I set the ease: 'power4.inOut' inside the stagger object, the ease works the opposite way like it was outIn instead of inOut (I need it to be inOut) but if I set the same ease to a div above the split text animation the bezier curve behaves correctly like: start slowly and speed up it the middle and then slow down again in the end but the stagger works the opposite like start fast, then slow down in the middle and then speed up in the end which is not what I want. Why does it flip the bezier curve like that?

Here's a code example of it: https://stackblitz.com/edit/nuxt-starter-komfsx?file=app.vue so you can compare the two animations.

[mvaneijgen]

You are just looking for a custom ease then! Something like M0,0 C0,0 0.3,0.5 0.3,0.5 0.312,0.5 0.5,0.5 0.5,0.5 0.5,0.5 0.7,0.5 0.7,0.5 0.7,0.5 1,1 1,1  but feel free to tweak it to your liking 

 

Your Stackblitz example crashed for me, so I updated my pen. Hope it helps and happy tweening! 

 

See the Pen xxBxMwz by mvaneijgen (@mvaneijgen) on CodePen

[Nicolaseliell]

But the thing I don't understand is why do need a custom tween if this is exactly what I need: If I do the opposite of this which is outIn, then it should be the one I dont want but the power4.inOut produces the effect of outIn even tho it should be inOut, I don't get it. Is there an explanation why it is flipped?

[Nicolaseliell]

I created this and this produces the curve I want but I'm still confused why it is flipped:

[PointC]

That curve distributes the start times of the staggers. Where it's flat, more targets start at the same time.

 

Professor @Carl has an excellent video about it here:

Happy tweening.

 

[Rodrigo]

Hi,

 

This demo shows in a nutshell how eases work in staggers and the difference between using eases in a tween and using eases in staggers:

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

 

Happy Tweening!