SplitText jerky transition

[ektorp]

I have a header animation using SplitText. There are 2 main steps to this header animation. The header letters first animate 'y' into place and then when it is complete it does a wavy text animation effect. It is technically working but the transition from step 1 to step 2 is a bit rough and jerky. I've tried making small adjustments to the pixel values but nothing seems to be working quite well. Can anything be done to smoothen the experience?

See the Pen f84dd07564391b8c82f442734dfab2bf by bdang (@bdang) on CodePen

[Rodrigo]

Hi,

 

Mainly the issue has to do with the values applied to the letters.

 

When you make the first animation, the letters go from 100 to 0, so far so good. Then on the wavy animation you animate the letters from -5 to 5. So basically when the first animation ends, the letters value of Y is 0 and when the second animation starts, the value of Y is -5 and that change happens immediately, so that's the jump you're seeing.

 

What you could do is create a tween that moves the letters from 0 to 5 and then the endless loop that goes from 5 to -5, in order to avoid the jump.