Estoy buscando crear un efecto de animación particular en los elementos de texto, pero como soy nuevo en GSAP, me vendría bien un poco de ayuda.

Tengo una serie de citas que necesito mostrar y animar en mi aplicación vue. La lista de citas deberá animarse para que cada cita se desplace desde la parte superior de la pantalla hasta la parte inferior en bucle. La matriz de comillas se hará más grande a medida que se agreguen nuevas comillas.

Hasta ahora he podido obtener la lista de citas como un todo para animarlas en la pantalla, pero esto no es exactamente lo que busco. Hice un lápiz de código que muestra mi código de donde estoy actualmente: https://1fj5k.csb.app/

Este problema con la animación de la lista como un todo es que cada cita no regresa correctamente a la parte superior de la página. Como puede ver en la siguiente imagen, cuando la lista llega a la mitad de la pantalla, queda un montón de espacio vacío encima de la lista. Me gustaría tener las comillas que ya salieron de la parte inferior de la pantalla para reaparecer en la parte superior de la pantalla, de modo que sea un ciclo continuo de comillas sin espacios vacíos entre ellas.

Estoy pensando que tendré que animar cada cita en lugar de la lista de citas, pero no estoy exactamente seguro de por dónde empezar con eso.

Así es como las comillas deben volver al principio: