Why Is Intersection Observer Adding Class To All Observed Elements Upon Intersection Of First Element?

Pardon my ignorance, as I'm learning. I'm working on getting divs with the class of .entry to animate upon intersection with the Intersection Observer by adding the class of .entry

Solution 1:

You can easily fix this issue by replacing:

blogs.forEach(blog => blog.classList.add('entry-animation'));

with

entry.target.classList.add('entry-animation')

inside entries.forEach() loop. The issue here is basically we just need to add the animation class to only the elements which are in view using entry.target, instead of adding them to all at once.

Working Demo