I am looking to create a particular animation effect on text elements but being new to GSAP I could use some help.

I have an array of quotes that I need to display and animate on my vue app. The list of quotes will need to be animated so that each quote is scrolling from top of the screen to the bottom on loop. The array of quotes will get larger as new quotes are added.

So far I have been able to get the list of quotes as a whole to animate down the screen but this is not exactly what I am going for. I have made a code pen showing my code for where I am currently: https://1fj5k.csb.app/

This issue with animating the list as a whole is that each quote is not looping back to the top of the page correctly. As you can see in the following image, when the list gets about halfway down the screen, there is a bunch of empty space left above the list. I would like to have the quotes that already left the bottom of the screen to respawn at the top of the screen so it is one continuous loop of quotes with no empty space between them.

I am thinking I will need to animate each quote instead of the list of quotes but I'm not exactly sure where to start with that.

This is how the quotes should loop back to top: