Triggering Css Animate Class On Scroll

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: slid

Solution 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:

<divclass="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.