reactjs How to repeat GSAP animation in React Js?

[Lema]

Hi, everyone. I'm new to GSAP, and I'm trying to add GSAP animation to create auto vertical scrolling boxes in my React app. Boxes are supposed to auto-scroll in a vertical position, while the box in the center has opacity 1, 2 other boxes will fade out until they're in the center.

 

image of the animation  I want to achieve.

 

Codesandbox code is https://codesandbox.io/s/auto-scrolling-pv502.

 

I was able to create 3 boxes, they auto-scroll only once, I can't figure out how to make them auto-scroll repeatedly and in order(so 1st box in the center =>2nd in the center => 3rd, and repeat). I tried to use repeat:-1, it doesn't allow to scroll boxes in order.

 

Any help and suggestions are greatly appreciated,

Thank you.

 

See the Pen by embed (@embed) on CodePen.

[elegantseagulls]

Hi @Lema,

 

This looks your animation is a bit different than the image of what you're looking to achieve, which appears to clone the exiting element and have that enter up from the bottom, however, based on what you have in your codesandbox, you'd likely be able to achieve what you want in a timeline looping through the 3 elements, with a repeat of -1, something like this:

See the Pen oNjqRjR by ryan_labar (@ryan_labar) on CodePen.

 

Otherwise, if you want to create more of an infinite slider effect, you'll want to use modifiers and/or clone elements. Something like:

See the Pen pozbbGX by elegantseagulls (@elegantseagulls) on CodePen.