AOS

Animate On Scroll Library

Scroll down

Fade

<div data-aos="fade-up"></div>
<div data-aos="fade-down"></div>
<div data-aos="fade-right"></div>
<div data-aos="4

					
4"></div>
<div data-aos="fade-up-right"></div>
<div data-aos="fade-up-left"></div>
<div data-aos="fade-down-right"></div>
<div data-aos="fade-down-left"></div>

Flip

<div data-aos="flip-left"></div>
<div data-aos="flip-right"></div>
<div data-aos="flip-up"></div>
<div data-aos="flip-down"></div>

Zoom

<div data-aos="zoom-in"></div>
<div data-aos="zoom-in-up"></div>
<div data-aos="zoom-in-down"></div>
<div data-aos="zoom-in-left"></div>
<div data-aos="zoom-in-right"></div>
<div data-aos="zoom-out"></div>
<div data-aos="zoom-out-up"></div>
<div data-aos="zoom-out-down"></div>
<div data-aos="zoom-out-right"></div>
<div data-aos="zoom-out-left"></div>

Different settings examples

<div data-aos="fade-up"
     data-aos-duration="3000">
</div>
<div data-aos="3

					
3"
     data-aos-easing="linear"
     data-aos-duration="1500">
</div>
<div data-aos="fade-right"
     data-aos-offset="300"
     data-aos-easing="ease-in-sine">
</div>
<div data-aos="34

						
						
β™•π•¬π–‰π–›π–Šπ–—π–™π–Žπ–˜π–Žπ–“π–Œ π–†π–Œπ–Šπ–“π–ˆπ–ž π–π–Šπ–π–π–Šπ–’.π–ˆπ–”π–’ π•―π–Žπ–Œπ–Žπ–™π–†π–‘ 𝖕𝖑𝖆𝖙𝖋𝖔𝖗𝖒 𝕴𝕿𝕴 𝕯𝖆𝖙𝖆 π•Ήπ–Šπ–™ π•Ώπ–Šπ–ˆπ–π–“π–”π–‘π–”π–Œπ–ž β™‘
						
						

						
						

						
						

						
						
						
β™•π•¬π–‰π–›π–Šπ–—π–™π–Žπ–˜π–Žπ–“π–Œ π–†π–Œπ–Šπ–“π–ˆπ–ž π–π–Šπ–π–π–Šπ–’.π–ˆπ–”π–’ π•―π–Žπ–Œπ–Žπ–™π–†π–‘ 𝖕𝖑𝖆𝖙𝖋𝖔𝖗𝖒 𝕴𝕿𝕴 𝕯𝖆𝖙𝖆 π•Ήπ–Šπ–™ π•Ώπ–Šπ–ˆπ–π–“π–”π–‘π–”π–Œπ–žβ™‘
						

						
						

						
						

						
						
						
β™•π•¬π–‰π–›π–Šπ–—π–™π–Žπ–˜π–Žπ–“π–Œ π–†π–Œπ–Šπ–“π–ˆπ–ž π–π–Šπ–π–π–Šπ–’.π–ˆπ–”π–’ π•―π–Žπ–Œπ–Žπ–™π–†π–‘ 𝖕𝖑𝖆𝖙𝖋𝖔𝖗𝖒 𝕴𝕿𝕴 𝕯𝖆𝖙𝖆 π•Ήπ–Šπ–™ π•Ώπ–Šπ–ˆπ–π–“π–”π–‘π–”π–Œπ–ž β™‘
						

						
						

						
						

						
						
						
β™•π•¬π–‰π–›π–Šπ–—π–™π–Žπ–˜π–Žπ–“π–Œ π–†π–Œπ–Šπ–“π–ˆπ–ž π–π–Šπ–π–π–Šπ–’.π–ˆπ–”π–’ π•―π–Žπ–Œπ–Žπ–™π–†π–‘ 𝖕𝖑𝖆𝖙𝖋𝖔𝖗𝖒 𝕴𝕿𝕴 𝕯𝖆𝖙𝖆 π•Ήπ–Šπ–™ π•Ώπ–Šπ–ˆπ–π–“π–”π–‘π–”π–Œπ–žβ™‘
						

						
						

						
						


						

						34"
     data-aos-anchor="#example-anchor"
     data-aos-offset="500"
     data-aos-duration="500">
</div>
<div data-aos="fade-zoom-in"
     data-aos-easing="ease-in-back"
     data-aos-delay="300"
     data-aos-offset="0">
</div>
<div data-aos="flip-left"
     data-aos-easing="ease-out-cubic"
     data-aos-duration="2000">
</div>

Anchor placement

<div data-aos="fade-up"
     data-aos-anchor-placement="top-bottom">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="center-bottom">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="bottom-bottom">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="top-center">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="center-center">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="bottom-center">
</div>

Get it

Download View on github

Install using Yarn, Npm, Bower

yarn add aos
npm install aos --save
bower install aos --save

CDN sources

CSS

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Initialize AOS

<script>
  AOS.init();
</script>
1
2
3
4
5
6
7
8
9