Repeat timeline just first item

[rhcarlosweb]

Hello, i'm days trying to do this effect with gsap, but unfortunately without success, i maded a code trying to do the effect

But i was think how can i made this only with gsap.timeline() and repeat

 

I need to remove always the first row of table, with animation and add another new row inside tbody with animation too, so the others items gonna up

 

Can someone help me with some tip?

 

I don't know how is name of this effect to search 😕

 

Thanks!

 

See the Pen mdJzeBG by rhcarlosweb (@rhcarlosweb) on CodePen

[ZachSaucier]

Hey rhcarlosweb and welcome to the GreenSock forums!

 

You did a pretty good job! What's your question, specifically? What do you need help with?

[rhcarlosweb]

54 minutes ago, ZachSaucier said:

Hey rhcarlosweb and welcome to the GreenSock forums!

 

You did a pretty good job! What's your question, specifically? What do you need help with?

Thanks Zach!

 

So, i have tried do with only a timeline({repeat: -1}) too but without sucess, because when the first item with class " -first" is removed, i add to the next row the class "-first" again to try repeat the effect to do the same first animation, but seems gsap don't catch the new item with class "-first"

 

Have a better way with can i do this effect without setInterval? Like with "repeat: -1" to repeat animation every time?

Here another pen i have maded trying do with repeat option only

 

See the Pen qBdJeWx by rhcarlosweb (@rhcarlosweb) on CodePen

 

The first row don't fadeOut 😕

[ZachSaucier]

I would probably approach this differently. How I'd do it:

1. Generate all of the HTML at the start. Creating/adding things to the DOM every change is performance intensive so you want to batch it together whenever possible.
2. Duplicate the top 3 entries at the bottom (so that it will loop as you need it to without jumping).
3. Use a loop to add animations to a master timeline for the fade in and fade out of each element. 
4. Use a separate animation that moves the container of all the names upwards the amount of one entry every n seconds that you want.
5. Make sure that the master timeline of the fades and the translation are synced. 

If you have any specific questions please let us know!