OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to toggle Animate.css classes on and off based on visibility using IntersectionObserver in JavaScript?

  • Thread starter Thread starter Hrbz
  • Start date Start date
H

Hrbz

Guest
I am trying to add and remove Animate.css classes to sections of my webpage based on their visibility in the viewport. I am using IntersectionObserver to detect when the sections enter and leave the viewport. However, after I reach the section's viewport, the Animate.css classes start to toggle on and off.

PS: i need to restart the animation every tine i am at the viewport of the section.

PSS: entry.target.classList.remove('animate__animated', entry.target.dataset.animation); this seems to be the problem.

here is my code:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--Icon Fonts - Font Awesome Icons-->
   <!-- Animate CSS-->
   <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
 />
    <style>
      body{margin: 0;}
      .hidden{opacity: 0;}
      #div{background-color: aliceblue; width: 100vw; height: 100vh;}
      #h1{height: 100vh; width: 100vw;}
    </style>
</head>
<body>
    <div id="div">

    </div>
    <div id="h1" class=" hidden " data-animation="animate__fadeInLeft">

      <h3 class="">XXXXXXXXX</h3>
      <h2 class="section-title" >XXXXXXXXXXXXXXXXX</h2>
      <p>
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX
      </p>
    </div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
    const sections = document.querySelectorAll('.hidden');
  
    const observerOptions = {
      threshold: 0.5 
    };
  
    const observerCallback = (entries, observer) => {
      entries.forEach(entry => {
        console.log(entry.isIntersecting)
        if (entry.isIntersecting) {
          entry.target.classList.remove('hidden');
          entry.target.classList.add('animate__animated', entry.target.dataset.animation);
        } else {
          entry.target.classList.add('hidden');
          entry.target.classList.remove('animate__animated', entry.target.dataset.animation);
        }
      });
    };
  
    const observer = new IntersectionObserver(observerCallback, observerOptions);
  
    sections.forEach(section => {
      observer.observe(section);
    });
  });
  
  </script>
</body>
</html>

i tryed changing IF parameters to more specific ones, changing eventListener with Scroll but is not what i need,

<p>I am trying to add and remove Animate.css classes to sections of my webpage based on their visibility in the viewport. I am using IntersectionObserver to detect when the sections enter and leave the viewport. However, after I reach the section's viewport, the Animate.css classes start to toggle on and off.</p>
<p>PS: i need to restart the animation every tine i am at the viewport of the section.</p>
<p>PSS: <code>entry.target.classList.remove('animate__animated', entry.target.dataset.animation);</code> this seems to be the problem.</p>
<p>here is my code:</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Icon Fonts - Font Awesome Icons-->
<!-- Animate CSS-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<style>
body{margin: 0;}
.hidden{opacity: 0;}
#div{background-color: aliceblue; width: 100vw; height: 100vh;}
#h1{height: 100vh; width: 100vw;}
</style>
</head>
<body>
<div id="div">

</div>
<div id="h1" class=" hidden " data-animation="animate__fadeInLeft">

<h3 class="">XXXXXXXXX</h3>
<h2 class="section-title" >XXXXXXXXXXXXXXXXX</h2>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX
</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll('.hidden');

const observerOptions = {
threshold: 0.5
};

const observerCallback = (entries, observer) => {
entries.forEach(entry => {
console.log(entry.isIntersecting)
if (entry.isIntersecting) {
entry.target.classList.remove('hidden');
entry.target.classList.add('animate__animated', entry.target.dataset.animation);
} else {
entry.target.classList.add('hidden');
entry.target.classList.remove('animate__animated', entry.target.dataset.animation);
}
});
};

const observer = new IntersectionObserver(observerCallback, observerOptions);

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

</script>
</body>
</html>
</code></pre>
<p>i tryed changing IF parameters to more specific ones, changing eventListener with Scroll but is not what i need,</p>
 

Latest posts

Top