0

Olá, no meu projeto tenho uma animação em Javascript com o scroll da pagina, que adiciona a classe Animate, assim que me aproximo do elemento, porém só alguns elementos da pagina estão funcionando perfeitamente, outros elementos estão adicionando essa classe assim que a página é carregada, sem eu nem estar perto do item, e mesmo quando me afasto do elemento a classe não é removida o que deveria acontecer.

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));
}

1 Resposta 1

1

Muito provavelmente o problema é por causa do time do debounce, ele está muito alto 200, se vc diminuir para 20 ou 10 vc vai ver que ele vai começa a pegar melhor as animações, pois ele vai ficar verificando o evento em tempos mais curtos, e não em um intervalo grande com 200. Para esse tipo de animação as vezes é bom ter isso em mente.

inserir a descrição da imagem aqui

Outra coisa que vc pode ajustar é essa conta, window.pageYOffset + ((window.innerHeight * 6) / 7) vc estava usando 3/4, mas com 6/7 vc consegue fazer o elemento animar um pouco antes, assim mesmo se o usuário scrollar muito rápido vc tem uma vantagem adicionando a classe logo que o elemento entre na tela, 3/4 a animação só aplica quando o elemento já subiu muito...

Segue o código com os ajustes que fiz pra vc testar.

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>

7
  • Bom dia Hugo, fiz as mudanças e continuou com o mesmo problema, 3 dos elementos animados funcionam normalmente, outros mais abaixo não tem efeito, assim que recarrega a página já é adicionada automaticamente a classe Animate. 2/06/2019 às 9:44
  • Fiz um teste aqui colocando mais elementos, e tudo funciona normalmente.... imgur.com/xMP4XPh Tenho a impressão que vc pode ter escrito algum parâmetro errado por ai como nome da classe ou algo do tipo, ou entao é o data-anime no CSS que vc deixou alguma propriedade de fora etc... Da uma olhada no DevTools para ver se o JS está mesmo adicionando a classe no elemento e se é a classe correta... veja ai imgur.com/tTAflTH
    – hugocsl
    2/06/2019 às 12:32
  • Verifiquei várias vezes e não encontrei o erro, tirei uns prints do código: imgur.com/a/3EDgdIv 3/06/2019 às 14:23
  • @EmersonMatheus fiz esse code pen com o código... comece removendo o que não faz parte da animação do código para ver se é algo lá que está interferindo nas coisas... Aqui está o exemplo codepen.io/hugocsl/pen/rgPRmd
    – hugocsl
    3/06/2019 às 14:37
  • parece que o problema acontece quando coloco o elemento animado dentro da section, fora funciona normal, o engracado é que na primeira section da pagina funciona normal. Sinceramente não sei qual é o problema. 3/06/2019 às 16:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .