WIP

src/style/_animations.scss

@@ -1,6 +1,54 @@
 /* ==========================================================================
-   GLOBAL
+   PARALLAX EFFECTS
 ========================================================================== */
+// Parallax title: Translate X
+.title-parallax {
+    transform: translate3d(var(--translateX), 0, 0);
+    will-change: transform;
+}
+
+
+
+/* ==========================================================================
+   REVEAL ANIMATIONS
+========================================================================== */
+.anim-mask {
+    display: block;
+    overflow: hidden;
+}
+
+// Translate each letter from top/bottom
+[data-aos="letters-translate-top"],
+[data-aos="letters-translate-bottom"] {
+    white-space: nowrap;
+
+    span {
+        display: inline-block;
+        transition: all 1000ms $ease-quart;
+
+        @for $i from 1 to 8 {
+            &:nth-child(#{$i}) {
+                transition-delay: $i * 40ms;
+            }
+        }
+    }
+
+    &.aos-animate {
+        span {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+}
+[data-aos="letters-translate-top"] {
+    span {
+        transform: translate3d(0, -100%, 0);
+    }
+}
+[data-aos="letters-translate-bottom"] {
+    span {
+        transform: translate3d(0, 100%, 0);
+    }
+}
 
 
 
@@ -33,19 +81,22 @@
     animation-play-state: paused;
 }
 
+// Layout: List
+@keyframes layoutListOdd {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(4px); }
+}
+@keyframes layoutListEven {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-4px); }
+}
 
-
-
-
-/* ==========================================================================
-   HEADER
-========================================================================== */
-
-
-
-
-
-
-/* ==========================================================================
-   MAIN
-========================================================================== */
+// Layout: Grid
+@keyframes layoutGridOdd {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(3px); }
+}
+@keyframes layoutGridEven {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-3px); }
+}