animate text in a wave

[idee-design 0 Likes (Newbie)]

Hi,

 

I'm new to GSAP and doing my first, little, private project. What I want to do is to animate a text like a wave, so every letter goes up and down and the animation is overlapping with the next letter.

 

It already works, but only once. When I try to reapeat it, the letters all start from the top-position and just "fall down". But at the end of the first sequence, all letters are at y=0. So why do the start the next sequence on y=-20?

 

I hope you can help me. I thought this would be easy, but I can't find my error.

 

Thanks,

 

Michael

See the Pen PqWooM by idee-design (@idee-design) on CodePen

[Diaco 1,999 Likes (Superhero)]

Hi idee-design 

 

try this : 

var tl=new TimelineMax({repeat:3,repeatDelay:1});

tl.staggerTo(".char",0.3,{y:-30,ease:Power2.easeInOut,repeat:1,yoyo:true},0.05);

[idee-design 0 Likes (Newbie)]

Hey, this is great. Thanks a lot for this superfast answer. Great community.