Triggering css animate class on scroll

Question

I am using the animate.css classes on my page. Currently I have all animations built on hover function.

For example:

#folder:hover .middle-button{
            animation-name: slideRight;
            animation-duration: 1s; 
            animation-timing-function: ease-in-out;     
            visibility: visible !important; 
        }

I would like to activate these animation classes on scroll and my question is:

What would be the easiest way to trigger this class using a Javascript function?

Answer 1

This is the best I can do: http://codepen.io/zvona/pen/ovDbk

It will add class visible to all the elements with className onAppear.

So, you can add class for all the elements that you want to animate on appear:

<div class="onAppear">This will be animated.</div>

And then on CSS (transition example, not animation - figure it out by yourself):

.onAppear {
  transition: transform 500ms;
}

.onAppear.visible {
  transform: translate3d(250px, 0px, 0px);
}

Hope this helps.