Observer script fails after second entry - any guesses

JavaScript
1

I’m trying to use an observer script to show / hide divs as others enter viewport. Below is the script I’m using. It works for the first two items, then fails when the third scrolls into view. Any idea why would be appreciated!

<script type="text/javascript">

var observer = new IntersectionObserver(function(entries) {
	if(entries[0].isIntersecting === true){
		// on screen
    document.getElementById('feel-1').classList.add('is-visible');
    document.getElementById('feel-1').classList.remove('is-hidden');
  } else {
    // not on screen
    document.getElementById('feel-1').classList.add('is-hidden');
  document.getElementById('feel-1').classList.remove('is-visible');
  }
  		if(entries[1].isIntersecting === true){
	 document.getElementById('feel-2').classList.add('is-visible');
    document.getElementById('feel-2').classList.remove('is-hidden');
  } else {
    //  not on screen
    document.getElementById('feel-2').classList.add('is-hidden');
  document.getElementById('feel-2').classList.remove('is-visible');
  }
	if(entries[2].isIntersecting === true){
	  document.getElementById('feel-3').classList.add('is-visible');
    document.getElementById('feel-3').classList.remove('is-hidden');
  } else {
    //  not on screen
    document.getElementById('feel-3').classList.add('is-hidden');
  document.getElementById('feel-3').classList.remove('is-visible');
  }{ threshold: [1] }
	
	
	
  });
observer.observe(document.querySelector("#middle-1"));
observer.observe(document.querySelector("#middle-2"));
observer.observe(document.querySelector("#middle-3"));


</script>

Thanks for looking!

2

Are you trying to do something like this:

2 Likes
3

Yes, exactly right! Let me dig into the code now, and thank you.

4

Wow, @PaulOB, that’s perfect. I made a fiddle with your code and the html I was using to show anyone else searching for this the brilliance of your code!

1 Like
5

Can I venmo you a coffee? I would have asked by PM, but can’t seem to locate that on this site.

2 Likes
6

No need but I appreciate the offer :slight_smile:

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.