Search code examples
javascriptcssanimationanimate.csswow.js

Wow JS hiding elements when page is loaded

I have a div element that I'd like to slide out on scroll. I've applied the slideOutLeft animation and included the data-wow-offset parameter and the animation itself works, but unfortunately when I load the page initially, the animated element is hidden. The element should start off visible and then slide out left and become hidden. Not sure why this isn't working. 

 @-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
  }
}
Solution

  • I've found a workaround via a Github convo about the same issue

    I just added:

        .wow {
visibility: visible !important;
}

    to my css file and the element is no longer hidden on page load.