I've got tow section tags that I want them to appear when they get scrolled, and the class is-visible gets added to the sections when they pass through the viewport. the problem is that the class is-visible gets added before the elements pass the viewport, and removed when they passed!! it's something wierd I don't what the mistake I did, I might be missing the obvious, any help I would be very gratefull !

this is the markup index.html:

<section class="section  scrollspy services animated-content" id="services">
<div class="container">

  <h2 class="services-title show-onscroll">What We Do</h2>

    <!-- animated content 1 -->
      <section class="Analysis show-onscroll">
        <h3 class="tab-title ">Media Analysis</h3>
       
      </section>

      <!-- animated content 2 -->
      <section class="Monitoring show-onscroll">
        <h3 class="tab-title ">Media Monitoring</h3>
        
      </section>
</div>

</section>

style.css :

/* Animated services */

.animated-content div.container>section {
    border: 1em solid #fff;
    border-bottom: 4em solid #fff;
    border-radius: .25em;
    box-shadow: 1em 1em 2em .25em rgba(0, 0, 0, .2);
    margin: 2em auto;
    opacity: 0;
    transform: translateY(4em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0, 1, .3, 1), opacity .3s .25s ease-out;
    max-width: 600px;
    width: 90%;
    will-change: transform, opacity;
}

div.container>section.is-visible {
    opacity: 1;
    transform: rotateZ(-2deg);
}

.animated-content .services-title {
    transform: translateY(4rem) scale(1.2);
    opacity: 0;
}

.animated-content .services-title.is-visible {
    animation: clear .9s forwards;
}

.animated-content section>h3 {
    color: var(--heading-font-color);
    font-size: 2rem;
}

.animated-content section>h5 {
    color: var(--heading-font-color);
    font-size: 1.5rem;
    margin-bottom: 0;
}

.animated-content section>p {
    margin: 0;
}

@keyframes clear {
    to {
        opacity: 1;
        transform: none;
    }
}

the index.js:

// Intersection observer
const callback = function (entries) {
    entries.forEach(entry => {
        entry.target.classList.toggle('is-visible');
    });
}
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll('.show-onscroll');
targets.forEach(target => {
    observer.observe(target);
})

I've got tow section tags that I want them to appear when they get scrolled, and the class is-visible gets added to the sections when they pass through the viewport. the problem is that the class is-visible gets added before the elements pass the viewport, and removed when they passed!! it's something wierd I don't what the mistake I did, I might be missing the obvious, any help I would be very gratefull !

this is the markup index.html:

<section class="section  scrollspy services animated-content" id="services">
<div class="container">

  <h2 class="services-title show-onscroll">What We Do</h2>

    <!-- animated content 1 -->
      <section class="Analysis show-onscroll">
        <h3 class="tab-title ">Media Analysis</h3>
       
      </section>

      <!-- animated content 2 -->
      <section class="Monitoring show-onscroll">
        <h3 class="tab-title ">Media Monitoring</h3>
        
      </section>
</div>

</section>

style.css :

/* Animated services */

.animated-content div.container>section {
    border: 1em solid #fff;
    border-bottom: 4em solid #fff;
    border-radius: .25em;
    box-shadow: 1em 1em 2em .25em rgba(0, 0, 0, .2);
    margin: 2em auto;
    opacity: 0;
    transform: translateY(4em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0, 1, .3, 1), opacity .3s .25s ease-out;
    max-width: 600px;
    width: 90%;
    will-change: transform, opacity;
}

div.container>section.is-visible {
    opacity: 1;
    transform: rotateZ(-2deg);
}

.animated-content .services-title {
    transform: translateY(4rem) scale(1.2);
    opacity: 0;
}

.animated-content .services-title.is-visible {
    animation: clear .9s forwards;
}

.animated-content section>h3 {
    color: var(--heading-font-color);
    font-size: 2rem;
}

.animated-content section>h5 {
    color: var(--heading-font-color);
    font-size: 1.5rem;
    margin-bottom: 0;
}

.animated-content section>p {
    margin: 0;
}

@keyframes clear {
    to {
        opacity: 1;
        transform: none;
    }
}

the index.js:

// Intersection observer
const callback = function (entries) {
    entries.forEach(entry => {
        entry.target.classList.toggle('is-visible');
    });
}
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll('.show-onscroll');
targets.forEach(target => {
    observer.observe(target);
})

• javascript
• html
• css
• intersection-observer

Share Improve this question Follow asked Mar 3, 2021 at 12:28 Abdalla AbdalmunimAbdalla Abdalmunim 10122 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You didn't add the check for entry.isIntersecting for the elements being observed. Also I switched from toggle to add the is-visible class. Currently I am not sure if you want to remove the is_visible class when element is not visible but that can be done in the else part of entry.isIntersecting.

So for now as soon as our element get's visible, I stop observing it.

// Intersection observer
const callback = function (entries) {
    entries.forEach(entry => {
        if(entry.isIntersecting)
        {
            entry.target.classList.add('is-visible');
          observer.unobserve(entry.target)
          }
    });
}
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll('.show-onscroll');
targets.forEach(target => {
    observer.observe(target);
})

/* Animated services */

.animated-content div.container>section {
    border: 1em solid #fff;
    border-bottom: 4em solid #fff;
    border-radius: .25em;
    box-shadow: 1em 1em 2em .25em rgba(0, 0, 0, .2);
    margin: 2em auto;
    opacity: 0;
    transform: translateY(4em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0, 1, .3, 1), opacity .3s .25s ease-out;
    max-width: 600px;
    width: 90%;
    will-change: transform, opacity;
}

div.container>section.is-visible {
    opacity: 1;
    transform: rotateZ(-2deg);
}

.animated-content .services-title {
    transform: translateY(4rem) scale(1.2);
    opacity: 0;
}

.animated-content .services-title.is-visible {
    animation: clear .9s forwards;
}

.animated-content section>h3 {
    color: var(--heading-font-color);
    font-size: 2rem;
}

.animated-content section>h5 {
    color: var(--heading-font-color);
    font-size: 1.5rem;
    margin-bottom: 0;
}

.animated-content section>p {
    margin: 0;
}

@keyframes clear {
    to {
        opacity: 1;
        transform: none;
    }
}

<section class="section  scrollspy services animated-content" id="services">
<div class="container">

  <h2 class="services-title show-onscroll">What We Do</h2>

    <!-- animated content 1 -->
      <section class="Analysis show-onscroll">
        <h3 class="tab-title ">Media Analysis</h3>
       
      </section>

      <!-- animated content 2 -->
      <section class="Monitoring show-onscroll">
        <h3 class="tab-title ">Media Monitoring</h3>
        
      </section>
</div>

</section>