Add parallax and reveal effects + performances on transitions

src/style/_animations.scss

@@ -3,7 +3,7 @@
 ========================================================================== */
 // Parallax title: Translate X
 .title-parallax {
-    transform: translate3d(var(--translateX), 0, 0);
+    transform: translateX(var(--translateX));
     will-change: transform;
 }
 
@@ -17,14 +17,16 @@
     overflow: hidden;
 }
 
-// Translate each letter from top/bottom
+// Translate each letter from a direction
 [data-aos="letters-translate-top"],
 [data-aos="letters-translate-bottom"] {
     white-space: nowrap;
 
     span {
         display: inline-block;
-        transition: all 1000ms $ease-quart;
+        transition: transform 1000ms $ease-quart;
+        will-change: transform;
+
 
         @for $i from 1 to 8 {
             &:nth-child(#{$i}) {
@@ -35,18 +37,66 @@
 
     &.aos-animate {
         span {
-            transform: translate3d(0, 0, 0);
+            transform: translate(0, 0);
         }
     }
 }
 [data-aos="letters-translate-top"] {
     span {
-        transform: translate3d(0, -100%, 0);
+        transform: translate(0, -100%);
     }
 }
 [data-aos="letters-translate-bottom"] {
     span {
-        transform: translate3d(0, 100%, 0);
+        transform: translate(0, 100%);
+    }
+}
+
+// Carousel prev/active/next photos
+[data-aos="carousel-prev"] {
+    transform: translate(-16%, -4%) rotate(-3deg) scale(0.8);
+    opacity: 0;
+    transition-duration: 1.6s;
+    transition-delay: 450ms;
+
+    &.aos-animate {
+        transform: translate(-9%, -1%) rotate(-1deg) scale(0.9);
+        opacity: 1;
+    }
+}
+[data-aos="carousel-active"] {
+    transform: scale(0.8);
+    opacity: 0;
+    transition-delay: 400ms;
+
+    &.aos-animate {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+[data-aos="carousel-next"] {
+    transform: translate(16%, -4%) rotate(3deg) scale(0.8);
+    opacity: 0;
+    transition-duration: 1.6s;
+    transition-delay: 500ms;
+
+    &.aos-animate {
+        transform: translate(9%, -1%) rotate(1deg) scale(0.9);
+        opacity: 1;
+    }
+}
+
+
+// Scale down and Fade in
+[data-aos="scale-down-fade-in"] {
+    transform: scale(1.1);
+    opacity: 0;
+    transition: transform 2s $ease-quart, opacity 2s $ease-quart;
+    will-change: transform, opacity;
+
+    &.aos-animate {
+        transform: scale(1);
+        opacity: 1;
     }
 }
 
@@ -61,27 +111,33 @@
     100% { transform: rotate(360deg); }
 }
 
-// Spinning globe (small)
+
+/*
+** Spinning globe
+*/
+@keyframes moveContinents {
+    0% { transform: translate(0,0); }
+    100% { transform: translate(-80.26px, 28.2px); }
+}
+.anim-spinGlobe {
+    animation: moveContinents 1.7s linear infinite;
+    animation-play-state: paused;
+}
+// Small
 @keyframes moveContinentsSmall {
-    0% { transform: translate3d(0,0,0); }
-    100% { transform: translate3d(-96.95px, 0, 0); }
+    0% { transform: translate(0,0); }
+    100% { transform: translate(-96.95px, 0); }
 }
 .anim-spinGlobeSmall {
     animation: moveContinentsSmall 1.5s linear infinite;
     animation-play-state: paused;
 }
 
-// Spinning globe
-@keyframes moveContinents {
-    0% { transform: translate3d(0,0,0); }
-    100% { transform: translate3d(-80.26px, 28.2px, 0); }
-}
-.anim-spinGlobe {
-    animation: moveContinents 1.7s linear infinite;
-    animation-play-state: paused;
-}
 
-// Layout: List
+/*
+** Layout
+*/
+// List
 @keyframes layoutListOdd {
     0% { transform: translateX(0); }
     100% { transform: translateX(4px); }
@@ -91,7 +147,7 @@
     100% { transform: translateX(-4px); }
 }
 
-// Layout: Grid
+// Grid
 @keyframes layoutGridOdd {
     0% { transform: translateY(0); }
     100% { transform: translateY(3px); }
@@ -99,4 +155,4 @@
 @keyframes layoutGridEven {
     0% { transform: translateY(0); }
     100% { transform: translateY(-3px); }
-}
+}