Animate on Scroll Examples

animate-on-scroll-examples.markdown

Animate on Scroll Examples

Demo by Gajendar Singh about using the AOS library accompanying the following article on SitePoint:

Cool on Scroll Animations Made Easy With the AOS Library URL: https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library

A Pen by bona on CodePen.

License.

index.html

<h1>Using AOS to Add Animations</h1>
<h2>Basic Animation</h2>
<p>You need to scroll down to see the effect.</p>
<div class="box a" data-aos="fade-up">
<h2>Animated using <code>fade-up</code>.</h2></div>
<div class="box b" data-aos="flip-down"><h2>Animated using <code>flip-down</code>.</h2></div>
<div class="box b" data-aos="zoom-in"><h2>Animated using <code>zoom-in</code>.</h2></div>

script.js

AOS.init();
 

scripts

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

style.css

body {
  font-size: 1.2em;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
}

.box {
  width: 40%;
  height: 200px;
  background: orange;
  border-radius: 2px;
  padding: 10px;
  color: white;
  text-align: center;
}

.a {
  margin: 120vh auto 0 auto;
}

.b {
  margin: 40vh auto 0 auto;
}

styles

<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" />