Tengo una lista de proyectos en un objeto, para los cuales creo tarjetas a través de JS para que se agreguen dinámicamente al DOM. Quiero agregar un fondo de carga animado en cada tarjeta antes de que muestren su contenido, y esta animación solo debería comenzar una vez que el usuario haya pasado el encabezado Proyectos.

Tengo una createProjectCard(projects) para crear el elemento de la tarjeta para cada proyecto y luego agregarles la clase animated-bg . Así que mi primer pensamiento para probar y activar la animación-bg en el desplazamiento fue llamar a window.addEventListener('scroll', () => {createProjectCard(projects)}) .

Ahora, la animación se activa cuando se desea, pero el otro efecto de esto es que una vez que se desplaza más allá de la línea de activación, las tarjetas se siguen creando una y otra vez con cada desplazamiento debajo de esa línea.

El razonamiento que hice hasta ahora:

• La única forma (que veo) de agregar la clase animated-bg a la tarjeta es después de crear las tarjetas.
• Las tarjetas solo se pueden crear dentro de createProjectCard() .
• Debido a que la animación debe comenzar solo cuando el usuario desea verificar los proyectos, significa que las tarjetas (junto con su animación) deben crearse una vez que pasamos el encabezado de la sección del proyecto en la página.
• Sin embargo, una vez que pasa esa línea de activación, la condición en la declaración if sigue siendo verdadera, por lo que las tarjetas se crean de nuevo en cada pergamino debajo de esa línea de activación.

Enlace al bolígrafo: https://codepen.io/awelie_go/pen/XWemQwp

(Para demostrar el problema, muestra solo 3 tarjetas de proyecto y, como puede ver, una vez que se desplaza un poco hacia abajo, se multiplican en cada desplazamiento)

¿Alguien tiene algún consejo sobre cómo debo abordar esto?

NB: esto debe estar en Vanilla Javascript solamente