<h1>Using the <code>disable</code> Key</h1>
<h2>Animations disabled on screens smaller than 800px</h2>
<p>You need to scroll down to see the effect.</p>
<div class="box a" data-aos="fade-up" data-aos-duration="1000" data-aos-easing="ease-in-quad">
<h2>Animated using <code>fade-up</code>.</h2></div>
<div class="box b" data-aos="flip-down" data-aos-duration="1000" data-aos-easing="ease-in-sine"><h2>Animated using <code>flip-down</code>.</h2></div>
<div class="box b" data-aos="zoom-in" data-aos-duration="1000" data-aos-easing="ease-in-out-cubic"><h2>Animated using <code>zoom-in</code>.</h2></div>
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;
  disable: function() {
    var maxWidth = 800;
    return window.innerWidth < maxWidth;
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js