How can I manage to make my boxes appear only once with IntersectionObserver?

Question

I created an UI where when the user scrolls down the page, 4 grid boxes appears with a "fade in" effect, but when we go up the page, then we scroll down the page again, the animation appears again, while precisely, I don't want the animation to be done several times, but only when the boxes have appeared once.

Here is my code:

const grid_objs = document.querySelectorAll('._grid-obj');

observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animation = `grid-obj .8s ${entry.target.dataset.delay} forwards ease`;
    } else {
      entry.target.style.animation = "none";
    }
  });
});

grid_objs.forEach((grid_obj) => {
  observer.observe(grid_obj);
});

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

.n-sec__ {
  min-height: 100vh;
  display:grid;
  max-height:100%;
  
}

._box {
  background:#f4f4f4;
  border-radius: 10px;
  position: relative;
}

._grid {
     display: grid;
     grid-template-columns: auto auto;
     min-width: 100%;
}
 ._grid ._grid-obj {
     display: grid;
     margin: 1em;
     padding: 2em;
     max-width: 800px;
     opacity: 0;
}
 ._grid ._grid-obj ._grid-title {
     color:#000000;
     font-family: 'Inter', sans-serif;
}
 ._grid ._grid-obj ._grid-p {
     font-weight: 300;
     color:#000000;
     padding: 0.5em 0;
     font-size: 10pt;
     line-height: 1.1em;
}

<section style="height:100vh;"></section>
<section class="n-sec__     ">
        <div class="_container  ">
            
            <div class="_grid">
                <div class="_grid-obj _box" data-delay="0s">
                    <h5 class="_grid-title _z">Community</h5>
                    <p class="_grid-p _z">Take advantage of a dynamic and caring community, present to propel you to the top of your ladder in your artistic journey. Mainly based on sharing, forge links between passionate or professional artists.</p>
                    <p class="_grid-p">Feel like the best at us (but stay yourself).</p>
                </div>
                <div class="_grid-obj _box" data-delay=".5s">
                    <h5 class="_grid-title">Share</h5>
                    <p class="_grid-p">Sharing is above all our priority, that's what our network represents. Indeed, we want to implement a realization of things that only very few people perceive. You have to know how to share and recognize your work as it is.</p>
                    <p class="_grid-p">So don't be shy, and show your work to other artists.</p>
                </div>
                <div class="_grid-obj _box" data-delay="1s">
                    <h5 class="_grid-title">Security</h5>
                    <p class="_grid-p">Your projects will always be fine at Nosfera, and uploaded on a secure server owned by <a href="//otux.cloud">otux.cloud</a>. Regarding your account, your password is encrypted and neither the administrative team has access to it.</p>
                    <p class="_grid-p">So you can sleep soundly.</p>
                </div>
                <div class="_grid-obj _box" data-delay="1.4s">
                    <h5 class="_grid-title">Customization</h5>
                    <p class="_grid-p">Manage your projects as you wish with our system dedicated to artistic organization.</p>
                    <p class="_grid-p">Manage your projects as you wish with our system dedicated to artistic organization. You have the ability to create the lists you want, reorganize your dashboard, pin the projects you want, and many more!</p>
                </div>
            </div>
        </div>
    </section>

I don't know why it is not working in the jsfiddle but it normally does.

score 4 · Answer 1 · answered Jan 30 '21 at 01:34

4

once your desired behavior takes place the first time, you can call unobserve() on the observer to stop it from being observed. ( https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve )

answered Jan 30 '21 at 01:34

GrgHughes55

43
2

Yes, but how? I'm sorry, I'm new to JS – Andrzej Jesztar Jan 30 '21 at 01:49
@AndrzejJesztar .. IntersectionObserver can take the `observer` too like: `new IntersectionObserver((entries, observer)` . So if you pass it the `observer` , you can then call `observer.unobserve(entry.target)` in your `forEach` after you run your defined behavior you want – GrgHughes55 Jan 30 '21 at 03:31

How can I manage to make my boxes appear only once with IntersectionObserver?

1 Answers1