Don't apply AOS styles when JavaScript is disabled

skylarkcob · Jun 22, 2018 · 88ce309 · 88ce309
1 parent 1394811
commit 88ce309
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 130 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="no-js">
   <head>
     <meta charset="utf-8">
     <title>AOS - Animate on scroll library</title>
@@ -41,6 +41,7 @@
 
     <script src="dist/aos.js"></script>
     <script>
+      document.querySelector('html').classList.remove('no-js');
       if (!window.Cypress) {
         const scrollCounter = document.querySelector('.js-scroll-counter');
 

diff --git a/src/sass/_animations.scss b/src/sass/_animations.scss
@@ -1,179 +1,178 @@
 // Animations variables
 $aos-distance: 100px !default;
 
-
-
-
-/**
- * Fade animations:
- * fade
- * fade-up, fade-down, fade-left, fade-right
- * fade-up-right, fade-up-left, fade-down-right, fade-down-left
- */
-
-[data-aos^='fade'][data-aos^='fade'] {
-  opacity: 0;
-  transition-property: opacity, transform;
-
-  &.aos-animate {
-    opacity: 1;
-    transform: none;
+html:not(.no-js) {
+  /**
+  * Fade animations:
+  * fade
+  * fade-up, fade-down, fade-left, fade-right
+  * fade-up-right, fade-up-left, fade-down-right, fade-down-left
+  */
+
+  [data-aos^='fade'][data-aos^='fade'] {
+    opacity: 0;
+    transition-property: opacity, transform;
+
+    &.aos-animate {
+      opacity: 1;
+      transform: none;
+    }
   }
-}
 
-[data-aos='fade-up'] {
-  transform: translate3d(0, $aos-distance, 0);
-}
+  [data-aos='fade-up'] {
+    transform: translate3d(0, $aos-distance, 0);
+  }
 
-[data-aos='fade-down'] {
-  transform: translate3d(0, -$aos-distance, 0);
-}
+  [data-aos='fade-down'] {
+    transform: translate3d(0, -$aos-distance, 0);
+  }
 
-[data-aos='fade-right'] {
-  transform: translate3d(-$aos-distance, 0, 0);
-}
+  [data-aos='fade-right'] {
+    transform: translate3d(-$aos-distance, 0, 0);
+  }
 
-[data-aos='fade-left'] {
-  transform: translate3d($aos-distance, 0, 0);
-}
+  [data-aos='fade-left'] {
+    transform: translate3d($aos-distance, 0, 0);
+  }
 
-[data-aos='fade-up-right'] {
-  transform: translate3d(-$aos-distance, $aos-distance, 0);
-}
+  [data-aos='fade-up-right'] {
+    transform: translate3d(-$aos-distance, $aos-distance, 0);
+  }
 
-[data-aos='fade-up-left'] {
-  transform: translate3d($aos-distance, $aos-distance, 0);
-}
+  [data-aos='fade-up-left'] {
+    transform: translate3d($aos-distance, $aos-distance, 0);
+  }
 
-[data-aos='fade-down-right'] {
-  transform: translate3d(-$aos-distance, -$aos-distance, 0);
-}
+  [data-aos='fade-down-right'] {
+    transform: translate3d(-$aos-distance, -$aos-distance, 0);
+  }
 
-[data-aos='fade-down-left'] {
-  transform: translate3d($aos-distance, -$aos-distance, 0);
-}
+  [data-aos='fade-down-left'] {
+    transform: translate3d($aos-distance, -$aos-distance, 0);
+  }
 
 
 
 
-/**
- * Zoom animations:
- * zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right
- * zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right
- */
+  /**
+  * Zoom animations:
+  * zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right
+  * zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right
+  */
 
-[data-aos^='zoom'][data-aos^='zoom'] {
-  opacity: 0;
-  transition-property: opacity, transform;
+  [data-aos^='zoom'][data-aos^='zoom'] {
+    opacity: 0;
+    transition-property: opacity, transform;
 
-  &.aos-animate {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(1);
+    &.aos-animate {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
   }
-}
 
-[data-aos='zoom-in'] {
-  transform: scale(.6);
-}
+  [data-aos='zoom-in'] {
+    transform: scale(.6);
+  }
 
-[data-aos='zoom-in-up'] {
-  transform: translate3d(0, $aos-distance, 0) scale(.6);
-}
+  [data-aos='zoom-in-up'] {
+    transform: translate3d(0, $aos-distance, 0) scale(.6);
+  }
 
-[data-aos='zoom-in-down'] {
-  transform: translate3d(0, -$aos-distance, 0) scale(.6);
-}
+  [data-aos='zoom-in-down'] {
+    transform: translate3d(0, -$aos-distance, 0) scale(.6);
+  }
 
-[data-aos='zoom-in-right'] {
-  transform: translate3d(-$aos-distance, 0, 0) scale(.6);
-}
+  [data-aos='zoom-in-right'] {
+    transform: translate3d(-$aos-distance, 0, 0) scale(.6);
+  }
 
-[data-aos='zoom-in-left'] {
-  transform: translate3d($aos-distance, 0, 0) scale(.6);
-}
+  [data-aos='zoom-in-left'] {
+    transform: translate3d($aos-distance, 0, 0) scale(.6);
+  }
 
-[data-aos='zoom-out'] {
-  transform: scale(1.2);
-}
+  [data-aos='zoom-out'] {
+    transform: scale(1.2);
+  }
 
-[data-aos='zoom-out-up'] {
-  transform: translate3d(0, $aos-distance, 0) scale(1.2);
-}
+  [data-aos='zoom-out-up'] {
+    transform: translate3d(0, $aos-distance, 0) scale(1.2);
+  }
 
-[data-aos='zoom-out-down'] {
-  transform: translate3d(0, -$aos-distance, 0) scale(1.2);
-}
+  [data-aos='zoom-out-down'] {
+    transform: translate3d(0, -$aos-distance, 0) scale(1.2);
+  }
 
-[data-aos='zoom-out-right'] {
-  transform: translate3d(-$aos-distance, 0, 0) scale(1.2);
-}
+  [data-aos='zoom-out-right'] {
+    transform: translate3d(-$aos-distance, 0, 0) scale(1.2);
+  }
 
-[data-aos='zoom-out-left'] {
-  transform: translate3d($aos-distance, 0, 0) scale(1.2);
-}
+  [data-aos='zoom-out-left'] {
+    transform: translate3d($aos-distance, 0, 0) scale(1.2);
+  }
 
 
 
 
-/**
- * Slide animations
- */
+  /**
+  * Slide animations
+  */
 
-[data-aos^='slide'][data-aos^='slide'] {
-  transition-property: transform;
-  visibility: hidden;
+  [data-aos^='slide'][data-aos^='slide'] {
+    transition-property: transform;
+    visibility: hidden;
 
-  &.aos-animate {
-    visibility: visible;
-    transform: translate3d(0, 0, 0);
+    &.aos-animate {
+      visibility: visible;
+      transform: translate3d(0, 0, 0);
+    }
   }
-}
 
-[data-aos='slide-up'] {
-  transform: translate3d(0, 100%, 0);
-}
+  [data-aos='slide-up'] {
+    transform: translate3d(0, 100%, 0);
+  }
 
-[data-aos='slide-down'] {
-  transform: translate3d(0, -100%, 0);
-}
+  [data-aos='slide-down'] {
+    transform: translate3d(0, -100%, 0);
+  }
 
-[data-aos='slide-right'] {
-  transform: translate3d(-100%, 0, 0);
-}
+  [data-aos='slide-right'] {
+    transform: translate3d(-100%, 0, 0);
+  }
 
-[data-aos='slide-left'] {
-  transform: translate3d(100%, 0, 0);
-}
+  [data-aos='slide-left'] {
+    transform: translate3d(100%, 0, 0);
+  }
 
 
 
 
-/**
- * Flip animations:
- * flip-left, flip-right, flip-up, flip-down
- */
+  /**
+  * Flip animations:
+  * flip-left, flip-right, flip-up, flip-down
+  */
 
-[data-aos^='flip'][data-aos^='flip'] {
-  backface-visibility: hidden;
-  transition-property: transform;
-}
+  [data-aos^='flip'][data-aos^='flip'] {
+    backface-visibility: hidden;
+    transition-property: transform;
+  }
 
-[data-aos='flip-left'] {
-  transform: perspective(2500px) rotateY(-100deg);
-  &.aos-animate {transform: perspective(2500px) rotateY(0);}
-}
+  [data-aos='flip-left'] {
+    transform: perspective(2500px) rotateY(-100deg);
+    &.aos-animate {transform: perspective(2500px) rotateY(0);}
+  }
 
-[data-aos='flip-right'] {
-  transform: perspective(2500px) rotateY(100deg);
-  &.aos-animate {transform: perspective(2500px) rotateY(0);}
-}
+  [data-aos='flip-right'] {
+    transform: perspective(2500px) rotateY(100deg);
+    &.aos-animate {transform: perspective(2500px) rotateY(0);}
+  }
 
-[data-aos='flip-up'] {
-  transform: perspective(2500px) rotateX(-100deg);
-  &.aos-animate {transform: perspective(2500px) rotateX(0);}
-}
+  [data-aos='flip-up'] {
+    transform: perspective(2500px) rotateX(-100deg);
+    &.aos-animate {transform: perspective(2500px) rotateX(0);}
+  }
 
-[data-aos='flip-down'] {
-  transform: perspective(2500px) rotateX(100deg);
-  &.aos-animate {transform: perspective(2500px) rotateX(0);}
+  [data-aos='flip-down'] {
+    transform: perspective(2500px) rotateX(100deg);
+    &.aos-animate {transform: perspective(2500px) rotateX(0);}
+  }
 }