2

I am using a tutorial that incorporates Animate.css and jQuery Viewport Checker to animate elements in viewport.

JS:

$('.animate').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeInUp',
    offset: 100,
    invertBottomOffset: true,
   });

It's working as expected but I don't like the way it animates the content on initial load as it jolts while the JS adds the hidden class and then adds the other classes to make it animate (and I don't want to move my JS into the head).

Is there a way to only have this apply to the elements which aren't in viewport from the initial load? So on load no Js is applied to anything in viewport. It's only when you scroll do you see elements animating in.

This site has the effect I'm after: http://www.clairehartley.com/process/

sarah3585
  • 637
  • 13
  • 37

0 Answers0