From 88ce3095f266952fec442589d1c9243d144b76a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Fri, 22 Jun 2018 20:15:48 +0200
Subject: [PATCH] Don't apply AOS styles when JavaScript is disabled

---
 demo/index.html           |   3 +-
 src/sass/_animations.scss | 257 +++++++++++++++++++-------------------
 2 files changed, 130 insertions(+), 130 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index 531f5f2..0ccd4db 100644
--- 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
index ae17606..5db3710 100644
--- 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);}
+  }
 }
