Animations AOS - Animate on scroll library

Small library to animate elements on your page as you scroll

Add animation to any element using data-aos attribute. This will add the animation to the element. See example below:


<div class="aos" 
data-aos="fade-up" 
data-aos-delay="300" 
data-aos-duration="1000" 
data-aos-easing="ease-in-out"
data-aos-offset="200"
data-aos-once="false">
...
</div>

See, Elements Animation with an example of a Sticky block.

There are several predefined animations you can use already:

Fade animations Flip animations Slide animations Zoom animations
fade flip-up slide-up zoom-in
fade-up flip-down slide-down zoom-in-up
fade-down flip-left slide-left zoom-in-down
fade-left flip-right slide-right zoom-in-left
fade-right zoom-in-right
fade-up-right zoom-out
fade-up-left zoom-out-up
fade-down-right zoom-out-down
fade-down-left zoom-out-left
fade-down-left zoom-out-right

You can choose one of these timing function to animate elements nicely:

linear ease ease-in ease-out ease-in-out
ease-in-back ease-out-back ease-in-out-back ease-in-sine ease-out-sine
ease-in-out-sine ease-in-quad ease-out-quad ease-in-out-quad ease-in-cubic
ease-out-cubic ease-in-out-cubic ease-in-quart ease-out-quart ease-in-out-quart

Required plugin

Copy-paste the following stylesheet <link> into your <head> before style.css file to load the CSS.


<link rel="stylesheet" type="text/css" href="assets/vendor/aos/aos.css">

Copy-paste the following script at the end of your page after bootstrap.bundle.min.js to enable it.


<script src="assets/vendor/aos/aos.js"></script>