Why my intersectionObserver and css animation not working?

Question

I have been reading for over 12 hours on this issue but I still can not get this figure out, I am trying to use IntersectionObserver with Fullpage Scroll so When each section enters the view port the animation triggers and when it is out of view port the animated element goes back to its original state, but for some reason I would appreciate any help. I am very new to this

new fullpage('#fullpage', {  
  autoScrolling: true,
  navigation: true
})


const sections = document.querySelectorAll('.section');

        observer = new IntersectionObserver((entries) => {

            entries.forEach(entry => {
                if(entry.intersectionRatio > 0) {
                    entry.target.style.animation = `square-animation 2s ${entry.target.dataset.delay} forwards ease-out`;
                }
                else {
                    entry.target.style.animation = 'none';
                }
            })

        })

        sections.forEach(sections => {
            observer.observe(sections)
        })

  .section {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section.one {
  background-color: rgb(6, 245, 245);
}
.section.two {
  background-color: rgb(0, 149, 255);
}
.section.three {
  background-color: rgb(112, 46, 46);
}
.section.four {
  background-color: rgb(157, 115, 160);
}
.square {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  background: orange;
  
 
}

@keyframes square-animation {
  0% {
    transform: scale(0, 0.025);
  }
  50% {
    transform: scale(1, 0.025);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.css" integrity="sha512-NGRhMiWY9pf5z8PLens7/u+LLwIPAu1dhJ7u9sHRWIo8TKrVbKiWlRdYRH3pVDCZA10zmobo+PBLGeLOREklBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div id="fullpage">
       
        
        <div class="section one">Section One </div>
        <div class="section two">Section two
                           <div class="square"></div>
              </div>
              
    
        <div class="section three">Section Three</div>
        <div class="section four">Section Four</div>

    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js" integrity="sha512-ojnoeSkK5NDwnuW5S0ZnddobHez8Bx1yVa3RE+Cd0fGEuY/NEd4sgVF/CJ6eDtnOeLZLbTJpNFrCkUYbHS2hRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>"
<script src="fullpage.js"></script>    
</body>
</html>

When I scroll from section one to two , the square should scale , but it does not — Alex
– Alex, Commented Oct 25, 2022 at 20:11

Lars · Accepted Answer · 2022-10-26 10:03:53Z

There's a couple of issues with your code

The animation style rule is malformed

The animation rule contains ${entry.target.dataset.delay}.
the value for that is undefined, so the applied rule becomes: square-animation 2s undefined forwards ease-out.
This is invalid and will will fall back to style="animation: 0s ease 0s 1 normal none running none;" (a none style).
I've resolved that for now by applying 0.5s delay by default

The element that receives the animation is the section not the square

entry.target is actually the parent section element and not the square you're trying to animate.
This can be resolved by selecting the square like: entry.target.querySelector('.square') and applying the animation to that.

Example

const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      const elem = entry.target.querySelector('.square')
      if (!!elem) {
        entry.target.querySelector('.square').style.animation = `square-animation 2s 0.5s forwards ease-out`;
      }
    } else {
      const elem = entry.target.querySelector('.square')
      if (!!elem) {
        entry.target.querySelector('.square').style.animation = 'none';
      }
    }
  })
})

sections.forEach(section => {
  observer.observe(section)
})

.section {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section.one {
  background-color: rgb(6, 245, 245);
}

.section.two {
  background-color: rgb(0, 149, 255);
}

.section.three {
  background-color: rgb(112, 46, 46);
}

.section.four {
  background-color: rgb(157, 115, 160);
}

.square {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  background: orange;
}

@keyframes square-animation {
  0% {
    transform: scale(0, 0.025);
  }
  50% {
    transform: scale(1, 0.025);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="fullpage">
    <div class="section one">Section One </div>
    <div class="section two">Section two
      <div class="square"></div>
    </div>
    <div class="section three">Section Three</div>
    <div class="section four">Section Four</div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js" integrity="sha512-ojnoeSkK5NDwnuW5S0ZnddobHez8Bx1yVa3RE+Cd0fGEuY/NEd4sgVF/CJ6eDtnOeLZLbTJpNFrCkUYbHS2hRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>"
  <script src="fullpage.js"></script>
</body>

</html>

Thank you very much @Lars it worked, I just don't know why there is a Green border around the text "section"

Collectives™ on Stack Overflow

Why my intersectionObserver and css animation not working?

1 Answer 1

The animation style rule is malformed

The element that receives the animation is the section not the square

Example

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The animation style rule is malformed

The element that receives the animation is the section not the square

Example

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related