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?

possible duplicate of Trigger events when the window is scrolled to certain positions — rnevius
– rnevius, Commented Aug 14, 2014 at 4:32
I assume you want to add class when the element appears on the viewport? — Samuli Hakoniemi
– Samuli Hakoniemi, Commented Aug 14, 2014 at 5: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
– Teon, Commented Aug 14, 2014 at 6:18

Samuli Hakoniemi · Accepted Answer · 2014-08-14 07:50:20Z

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.

answered Aug 14, 2014 at 7:50

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Teon Over a year ago

Great, I got it to work now as you can see here: 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?

Collectives™ on Stack Overflow

Triggering css animate class on scroll

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related