Looping Animation for Text Carousel Fade Effect

[newyorker]

Hi everyone,

 

I'm developing an animation for a set of divs that dynamically display Weather data fetched from an API. The goal is to create a seamless looping animation where three  elements (st1, st2, st3) fade in and out in sequence, creating an overlapping carousel effect.

 

The challenge I'm facing is with the transition from st3 back to st1 in the looping sequence. On the first loop, the transition from st1 to st3 is smooth and works as expected. However, in subsequent loops, st1 seems to restart and plays its fade-in animation again, which disrupts the flow.

 

I know this is a very simple issue, but I just couldn't manage to create a seamless loop, and would really appreciate if someone can help me out.

 

Here's my minimal StackBlitz demo for reference:
https://stackblitz.com/edit/nextjs-zjgmib?file=pages%2Findex.js

Thank you in advance.

[Rodrigo]

Hi,

 

@Carl  has you covered with His super seamless loop tutorial:

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

Here is a codepen demo that shouldn't be too hard to port to React:

See the Pen ExVEOPa by snorkltv (@snorkltv) on CodePen

 

Hopefully this helps.

Happy Tweening!

[newyorker]

Thank you so much @Rodrigo, this is great. I will also definitely check out @Carl's tutorial.