⚠️ Fix most animations/transitions performance issues

- Basically add `will-change` to CSS elements to enable GPU animations, less choppy, more sassy
- Use requestAnimationFrame over setTimeout
- Avoid repaints AMAP

src/style/organisms/_carousel.scss

@@ -1,7 +1,7 @@
 // Carousel
 .carousel {
     background-color: $color-primary;
-    overflow: hidden;
+    will-change: transform, opacity;
 
     @include breakpoint (sm) {
         overflow: visible;
@@ -65,7 +65,7 @@
             height: 100%;
             transform: scale($scale);
             transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
-            will-change: transform, opacity, top, left;
+            @extend %willchange;
 
             // Active photo
             &.is-active {
@@ -134,6 +134,7 @@
             width: 100%;
             height: 100%;
             box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
+            @extend %willchange;
 
             @include breakpoint (sm) {
                 border-radius: $radius;
@@ -162,6 +163,11 @@
                 height: auto;
             }
         }
+
+        // Performance
+        %willchange {
+            will-change: transform, opacity;
+        }
     }
 
 
@@ -231,11 +237,11 @@
         left: 0;
         width: 100%;
         opacity: 0;
+        margin-top: 32px;
+        padding-bottom: 4px;
         text-align: center;
         transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
         will-change: transform, opacity;
-        margin-top: 32px;
-        padding-bottom: 4px;
 
         @include breakpoint (sm) {
             margin-top: pxVW(80);
@@ -244,6 +250,11 @@
             margin-top: 72px;
         }
 
+        // State
+        .state {
+            margin-top: 6px;
+        }
+
         // States
         &.is-prev {
             transform: translateY(-$distance);
@@ -255,11 +266,6 @@
         &.is-next {
             transform: translateY($distance);
         }
-
-        // State
-        .state {
-            margin-top: 6px;
-        }
     }
 
 

src/style/organisms/_fullscreen.scss

@@ -8,6 +8,10 @@
     overflow: hidden;
     pointer-events: none;
 
+    &, * {
+        will-change: transform, opacity;
+    }
+
     // Photo
     &__image {
         width: 100%;
@@ -17,7 +21,6 @@
         transform: scale(1.1);
         background: $color-primary;
         transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
-        will-change: transform, opacity;
 
         img {
             position: relative;
@@ -48,7 +51,6 @@
         opacity: 0;
         transform: scale(1.1) translateY(24px);
         transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
-        will-change: transform, opacity;
 
         // Visible state
         &.is-visible {
@@ -74,7 +76,6 @@
         background-color: $color-primary;
         border-radius: 100%;
         transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
-        will-change: transform, opacity;
 
         // Hidden state
         &.is-hidden {