Disable fade animation if needed

eddiesigner · Aug 20, 2019 · b6380ea · b6380ea
1 parent f8dde76
commit b6380ea
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 16 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
diff --git a/assets/js/app.js b/assets/js/app.js
diff --git a/package.json b/package.json
@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.2.3"
+  "version": "0.2.4"
 }
diff --git a/src/js/app.js b/src/js/app.js
@@ -230,10 +230,14 @@ $(document).ready(() => {
     })
   }
 
-  AOS.init({
-    once: true,
-    startEvent: 'DOMContentLoaded',
-  })
+  if (typeof disableFadeAnimation === 'undefined' || !disableFadeAnimation) {
+    AOS.init({
+      once: true,
+      startEvent: 'DOMContentLoaded',
+    })
+  } else {
+    $('[data-aos]').addClass('no-aos-animation')
+  }
 
   tippy('.js-tooltip')
 

diff --git a/src/sass/libs/aos/_animations.scss b/src/sass/libs/aos/_animations.scss
@@ -8,7 +8,7 @@ $aos-distance: 100px !default;
  * fade-up-right, fade-up-left, fade-down-right, fade-down-left
  */
 
-[data-aos^='fade'][data-aos^='fade'] {
+[data-aos^='fade'][data-aos^='fade']:not(.no-aos-animation) {
   opacity: 0;
   transition-property: opacity, transform;
 
@@ -18,34 +18,34 @@ $aos-distance: 100px !default;
   }
 }
 
-[data-aos='fade-up'] {
+[data-aos='fade-up']:not(.no-aos-animation) {
   transform: translate3d(0, $aos-distance, 0);
 }
 
-[data-aos='fade-down'] {
+[data-aos='fade-down']:not(.no-aos-animation) {
   transform: translate3d(0, -$aos-distance, 0);
 }
 
-[data-aos='fade-right'] {
+[data-aos='fade-right']:not(.no-aos-animation) {
   transform: translate3d(-$aos-distance, 0, 0);
 }
 
-[data-aos='fade-left'] {
+[data-aos='fade-left']:not(.no-aos-animation) {
   transform: translate3d($aos-distance, 0, 0);
 }
 
-[data-aos='fade-up-right'] {
+[data-aos='fade-up-right']:not(.no-aos-animation) {
   transform: translate3d(-$aos-distance, $aos-distance, 0);
 }
 
-[data-aos='fade-up-left'] {
+[data-aos='fade-up-left']:not(.no-aos-animation) {
   transform: translate3d($aos-distance, $aos-distance, 0);
 }
 
-[data-aos='fade-down-right'] {
+[data-aos='fade-down-right']:not(.no-aos-animation) {
   transform: translate3d(-$aos-distance, -$aos-distance, 0);
 }
 
-[data-aos='fade-down-left'] {
+[data-aos='fade-down-left']:not(.no-aos-animation) {
   transform: translate3d($aos-distance, -$aos-distance, 0);
 }