Infinie Scrolling Text

[Vincent07]

Hi everybody!

 

I'm trying to do a simple animation... but it's complicated

 

 

 

The code is simple:

<div class="rotator">
     <span class="keyword">DESIGN</span>
     <span class="keyword">DIGITAL</span>
</div>

I looked other examples on gsap forums, but i always have a problem with the "infinite", and I can't control the dwell time of each word

 

What am I doing wrong?

Thanks a lot!

 

Vincent

 

 

See the Pen GRXVQPV by pit07 (@pit07) on CodePen

[Rodrigo]

Hi,

 

This is mostly a logic issue when looping through the elements. You definitely don't need to create a duplicate of the first element, just add an onComplete to the animation that moves each element down, in order to move it to the top again.

 

Here is a live example of the way I'd do this:

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

 

Hopefully this helps.

Happy Tweening!

[Vincent07]

@Rodrigo : you're the best. It's perfect!

 

I didn't know this syntax with the "<"

Thanks a lot!

 

Vincent