ANIME.js

Reveal Animations When You Scroll. Very Animate.css Friend :)

rollIn

bounceInDown

lightSpeedIn

rollIn

pulse

bounceInRight

bounceInLeft

flipInX

bounceInRight

rollIn

shake

swing

rollIn

bounceInUp

lightSpeedIn

rollIn

pulse

lightSpeedIn

bounce

bounceInUp

bounceInRigh

rollIn

flip

bounceInRight

rollIn

bounceInDown

bounceInRight

Download

ANIME.js or ANIME.min.js

How use

Link to the CSS animation and jQuery library

Link to Animate.css, jQuery.js, jQuery.appear.js and ANIME.js

<link rel="stylesheet" href="css/animate.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.appear.js"></script>

<script type="text/javascript" src="js/anime.js"></script>

Make an element revealable

Add the CSS class .anime to a HTML element: it will be invisible until the user scrolls to reveal it.

<div class="anime">
Content to Reveal Here
</div>

Choose the animation style

Pick an animation style in Animate.css, then add the CSS class to the HTML element

<div class="anime bounceInUp">
Content to Reveal Here
</div>

Advanced options

data-anime-duration: Change the animation duration
data-anime-delay: Delay before the animation starts

<div class="anime bounceInUp" data-anime-duration="3s" data-anime-delay="2s">
Content to Reveal Here
</div>

Don't like jQuery?

Use amazing native javascript WOW.js

ANIME.js

is not done for money, but feel free to show us how much you like it :)

MIT license | ANIME.js © 2016 Alex Zappa a.k.a. re[at]lat