Skip to content

Instantly share code, notes, and snippets.

@bonaxcrimo
Created June 5, 2017 02:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bonaxcrimo/7a75761ec0aebc0f152c0e3c429cffe5 to your computer and use it in GitHub Desktop.
Save bonaxcrimo/7a75761ec0aebc0f152c0e3c429cffe5 to your computer and use it in GitHub Desktop.
Animate on Scroll Examples
<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>
AOS.init();
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
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;
}
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment