I have a list of projects in an object, for which I create cards through JS so they're added dynamically to the DOM. I want to add an animated loading background on each card before they display their content, and this animation should only start once the user has scrolled past the Projects heading.

I have a createProjectCard(projects) function to create the card element for each project and then add the animated-bg class to them. So my first thought to try and trigger the animated-bg on scroll was to call window.addEventListener('scroll', () => {createProjectCard(projects)}).

Now, the animation is indeed triggered when desired, but the other effect of this is that once scrolling past the trigger line, the cards keep on being created over and over with each scroll under that line.

The reasoning I made so far:

• The only way (that I see) to add the animated-bg class to the card is after the cards are created.
• The cards can only be created within createProjectCard().
• Because the animation should begin only when the user wants to check the projects, it means the cards (together with their animation) need to be created once we scroll past the project section heading on the page.
• However, once past that trigger line, the condition in the if statement remains true, so the cards get created anew on each scroll below that trigger line.

Link to the pen: https://codepen.io/awelie_go/pen/XWemQwp

(To demonstrate the issue, it shows only 3 project cards, and as you can see once you scroll a bit down, they multiply on each scroll)

Does someone have any pointers as to how I should approach this?

NB: this needs to be in Vanilla Javascript only