Apply CSS transition when element comes into viewport

Question

I'm trying to apply CSS transition effect when an element comes to viewport (i.e. when user scrolls to it), but not before.

I already know how to use CSS transitions, but how do I apply them only when the element comes to viewport?

What it the best way of doing this? If there's some library's to simplify the task, I would be glad to know.

Post and example of code you have made – web-tiki Jan 22 '14 at 15:35 — web-tiki, Jan 22 '14 at 15:35
Here you go - https://stackoverflow.com/a/26466655/104380 – vsync Jun 20 '17 at 07:55 — vsync, Jun 20 '17 at 07:55

score 15 · Answer 1 · answered Jul 19 '14 at 09:07

Give CSS3 Animate It a go, makes the whole process as simple as adding a few clases.

http://jackonthe.net/css3animateit/

Then you can just add the classes like this to get started.

<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>

score 13 · Answer 2 · answered Jan 22 '14 at 16:52

13

Here is a great demo:

Slide In (as you scroll down) Boxes | CSS-Tricks http://bit.ly/19NN2NJ
Slide in from bottom boxes - CodePen http://bit.ly/1dvNF9U

Maybe it helps you to see point. Point is detect a viewport and apply effect just onScroll as you can see in demo. If you want help with bug or specific problem just send a source :-) and I'll solve.

answered Jan 22 '14 at 16:52

Samuel Ondrek

2,082
1
14
25

Here's another - https://codepen.io/vsync/pen/rwygwq – vsync Jun 20 '17 at 09:41

Apply CSS transition when element comes into viewport

2 Answers2