search

graingert / WOW

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

Annoying flickering: Content showed before the animation #37

Closed lvca closed 3 years ago

lvca commented 3 years ago

Hy guys,

I'm having this annoying effect where the div is shown before the animation starts resulting in an annoying effect. Look at this:

WOW-480

I'm using the default settings and these are the relevant DOM elements:

          <div class="about-image wow fadeInRightBig text-center" data-wow-duration="1s" data-wow-delay="0s"
               style="z-index: 90; filter: drop-shadow(0 0 30px #333);">
            <img...>
          </div>

          <div class="text-center wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0s">

is that normal or is there something that goes in conflict? Thanks.

DanSnow commented 3 years ago

Try adding visibility: hidden to your element style. So it will be hidden at first, then it will be set to visible after wow.js initialized.

graingert commented 3 years ago

@lvca did you try aos animate on scroll? https://michalsnik.github.io/aos/

lvca commented 3 years ago

visibility: hidden; resolved, I don't know why I didn't think about it... Thanks @DanSnow

schroef commented 3 years ago

@lvca did you try aos animate on scroll? https://michalsnik.github.io/aos/

Thanks for the link! I saw this AOS in the readme. Is this by the same devs? The explanation is a bit vague about this.

graingert commented 3 years ago

@schroef no it's just a more modern equivalent