0

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?

Teon
  • 37
  • 1
  • 12
  • possible duplicate of [Trigger events when the window is scrolled to certain positions](http://stackoverflow.com/questions/5672320/trigger-events-when-the-window-is-scrolled-to-certain-positions) – rnevius Aug 14 '14 at 04:32
  • I assume you want to add class when the element appears on the viewport? – Samuli Hakoniemi Aug 14 '14 at 05:50
  • Yes, this is correct. So I would like add a class when the element appears on the viewport. I have several div classes on the page that are using different animations. The animation for each div have been already added on the CSS sheet and I just need to understand how to trigger these animated classes if the element appears on viewport. – Teon Aug 14 '14 at 06:18

1 Answers1

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.

Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
  • Great, I got it to work now as you can see here: http://codepen.io/anon/pen/Afqza Now the problem is that I would like only the handle class element to animate on viewport, now the whole SVG does the animation. Any ideas how can I fix that? – Teon Aug 15 '14 at 01:45