Animate Elements On Scroll Using Animate.css

Category: Animation , Javascript | September 15, 2017
Authorwallacesilva
Last UpdateSeptember 15, 2017
LicenseMIT
Views3,952 views
Animate Elements On Scroll Using Animate.css

Just another JavaScript plugin that makes use of animate.css based CSS animations to animate any DOM elements as they enter the window.

How to use it:

Include the necessary animate.css in the header of the html page.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Include the minified version of the animate on scroll library at the bottom of the web page.

<script src="animate-on-scroll.min.js"></script>

Add an animation of your choice to the target element using ‘data-animation’ attribute as this:

<img class="aos-item" 
     data-animation="fadeInLeft" 
     src="1.jpg"
>

You Might Be Interested In:


Leave a Reply