1

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);
  }
}
pfbarnet
  • 101
  • 10
  • did you try adding `visibility: visible` in the from block? Otherwise you can use `opacity` instead. – zfrisch Oct 24 '18 at 14:07
  • Hi @zfrisch, yes I've tried adding visibility: visible and opacity: 1 > opacity: 0 and still doesn't want to work. It's strange too, all of the wow examples I've seen (even on the wow website) don't demonstrate the slideOut functionality, only slideIn. My goal is to create a grid of divs that break away when user scrolls down. Didn't think this would be a problem with animate/wow... – pfbarnet Oct 24 '18 at 14:14

1 Answers1

2

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.

pfbarnet
  • 101
  • 10