Javascript Animações só acontecem com alguns elementos

[Emerson Matheus]

Olá, no meu projeto tenho uma animação ao scroll, quando me aproximo do elemento ele "surge" de algum lado, porém por alguma razão somente alguns elementos do site estão funcionando 100%, outros, no inspecionar mostra que a classe ANIMATE já é adicionada no elemento assim que a página é carregada, e a mesma não é removida mesmo quando eu me aproximo e afasto do elemento.

Fazendo alguns testes vi que quando o elemento animado está fora do pai SECTION funciona normalmente, quando está dentro não (com exceção do primeiro elemento animado do site).

Fiz o upload do código para o JSFiddle, https://jsfiddle.net/kuxf7mep/ ,como pode ver o elemento ARTICLE na linha 101 está animado normalmente, porém os elementos HEADER da linha 147 e o MAIN da linha 152 estão com a animação mas não funcionam.

OBS: Podem fazer o teste colocando um elemento animado dentro e fora da section.

[DiF]

@Emerson Matheus

 

Não sei se entendi muito bem, mas você quer aquele efeito de rolagem, que vai aparecendo os elementos na tela enquanto rola? Se sim, existem plugins já prontos, bastando apontar eles e os atributos...

 

https://michalsnik.github.io/aos/

http://jackonthe.net/css3animateit/

 

Estes dois são os melhores que eu conheço. Muito simples de usar e o efeito é espetacular.

 

[Emerson Matheus]

@DiF Ok, vou baixa-los e testar, se resolver o problema marco sua resposta.

[Emerson Matheus]

@DiF@DiF Baixei os dois, mas gostei mais do Css3AnimateIt. Resolveu meu problema, abraço.