Animations in the elements happen as soon as the page loads

Question

Hello, in my project I have an animation in Javascript with the page scroll, which adds the Animate class, so I approach the element, but only some elements of the page are working perfectly, other elements are adding this class as soon as the page is loaded, without me even being near the item, and even when I move away from the element the class is not removed which should happen.

html:

<div data-anime="left"></div>

Css:

    [data-anime] {
        opacity: 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    [data-anime = "left"] {
        transform: translate3d(-50px, 0, 0);
    }

[data-anime].animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

Javascript:

const debounce = function(func, wait, immediate) {
  let timeout;
  return function(...args) {
    const context = this;
    const later = function () {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

const target = document.querySelectorAll('[data-anime]');
const animationClass = 'animate';

function animeScroll() {
  const windowTop = window.pageYOffset + ((window.innerHeight * 3) / 4);
  target.forEach(function(element) {
    if((windowTop) > element.offsetTop) {
      element.classList.add(animationClass);
    } else {
      element.classList.remove(animationClass);
    }
  })
}

animeScroll();

if(target.length) {
  window.addEventListener('scroll', debounce(function() {
    animeScroll();
  }, 200));
}

Answer 1

Most likely the problem is because of the team’s debounce, It is very high 200, if you decrease to 20 or 10 vc you will see that it will start to pick the animations better, because it will be checking the event in shorter times, and not in a large interval with 200. For that kind of animation sometimes it’s good to keep that in mind.

Another thing you can adjust is this account, window.pageYOffset + ((window.innerHeight * 6) / 7) you were using 3/4, but with 6/7 you can make the element animate a little earlier, so even if the user scrollar very fast you have an advantage by adding the class as soon as the element enters the screen, 3/4 the animation only applies when the element has already climbed too...

Follow the code with the adjustments I made for you to test.

const debounce = function(func, wait, immediate) {
  let timeout;
  return function(args) {
    const context = this;
    const later = function () {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

const target = document.querySelectorAll('[data-anime]');
const animationClass = 'animate';

function animeScroll() {
  const windowTop = window.pageYOffset + ((window.innerHeight * 6) / 7);
  target.forEach(function(element) {
    if((windowTop) > element.offsetTop) {
      element.classList.add(animationClass);
    } else {
      element.classList.remove(animationClass);
    }
  })
}

animeScroll();

if(target.length) {
  window.addEventListener('scroll', debounce(function() {
    animeScroll();
  }, 5));
}

body {
  height: 200vh;
}

.tt {
  margin-top: 120vh;
}

[data-anime] {
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

[data-anime = "left"] {
    transform: translate3d(-50px, 0, 0);
}

[data-anime].animate {
    opacity: 1;
    transform: translate3d(100px, 0, 0);
    background-color: red;
}

<div class="tt" data-anime="left">123</div>