CODEWITHSUNDEEP
javascriptcssanimationanimate.csswow.js
pfbarnet
pfbarnet

Reputation: 111

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);
  }
}

Upvotes: 1

Views: 2889

Answers (1)

pfbarnet
pfbarnet

Reputation: 111

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.

Upvotes: 2

Related Questions