graingert / WOW

Reveal CSS animation as you scroll down a page
https://wowjs.uk
Other
1.58k stars 1.56k forks source link

wow is not playing once when we hide then show the elements #13

Closed roro1993 closed 6 years ago

roro1993 commented 6 years ago

the page loads and the animation plays and finishes.. expected not to animate again

for a certain reason i need to display none the wrapper of one of the animated elements and show it back on a certain condition..

when i show it back the animation inside this wrapper plays again..

how can i stop this behavior??

how can we for example add a class that stops any attempt of the animation after that the element has already animated..

roro1993 commented 6 years ago

I found out how to do this

  function afterReveal(e){
    e.addEventListener('animationend', function () {
      $(e).addClass('no-animation');
    });
  }

  var wow = new WOW({
    offset:       100,
    callback: afterReveal
  });
  wow.init();

and this class

.no-animation{
  animation: unset;
}
graingert commented 6 years ago

Have you tried using AOS?

On 15 Dec 2017 11:41, "roro1993" notifications@github.com wrote:

Closed #13 https://github.com/graingert/WOW/issues/13.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/graingert/WOW/issues/13#event-1389462092, or mute the thread https://github.com/notifications/unsubscribe-auth/AAZQTKTsLS56EzzFzBTOUeFJvHn1fCQNks5tAlrZgaJpZM4RDG5p .