⚠️ 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/_animations.scss

@@ -12,7 +12,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    will-change: transform;
+
+    &, * {
+        will-change: transform, opacity;
+    }
 
     // Content
     &__loader {
@@ -29,7 +32,6 @@
         height: 100%;
         background-color: $color-primary;
         transform-origin: 50% 0;
-        will-change: transform;
     }
 
     // Hidden

src/style/_base.scss

@@ -59,7 +59,6 @@ button {
     letter-spacing: -2vw;
     pointer-events: none;
     user-select: none;
-    will-change: transform;
 
     @include breakpoint (lg) {
         font-size: pxVW(700);
@@ -67,6 +66,10 @@ button {
     @include breakpoint (1920px) {
         font-size: rem(900px);
     }
+
+    &, span {
+        will-change: transform, opacity;
+    }
 }
 
 
@@ -109,6 +112,9 @@ button {
             margin-right: -8px;
         }
     }
+    span, em {
+        will-change: transform;
+    }
 
     // Bigger version
     &--big {
@@ -189,7 +195,7 @@ button {
 
 .style-caps {
     font-family: $font-sans;
-    font-size: rem(14px);
+    font-size: rem(12px);
     color: $color-tertiary;
     text-transform: uppercase;
     letter-spacing: 1px;
@@ -198,6 +204,10 @@ button {
     &--transparent {
         color: rgba($color-tertiary, 0.5);
     }
+
+    @include breakpoint (sm) {
+        font-size: rem(14px);
+    }
 }
 
 .style-description {

src/style/atoms/_button-control.scss

@@ -14,7 +14,7 @@
     cursor: pointer;
     outline: none;
     transition: background-color 350ms $ease-quart;
-    will-change: background-color;
+    will-change: transform, opacity;
 
     @include breakpoint (sm) {
         width: 56px;
@@ -160,7 +160,7 @@
         overflow: visible;
         background-color: rgba($color-lightpurple, 0.5);
         transition: background-color 150ms $ease-inout;
-        will-change: background-color;
+        will-change: transform, opacity;
 
         // Icon
         svg[fill] {

src/style/molecules/_location.scss

@@ -12,6 +12,10 @@
         margin-right: 72px;
     }
 
+    &, a * {
+        will-change: transform, opacity;
+    }
+
     a {
         position: relative;
         z-index: 2;

src/style/molecules/_photo.scss

@@ -23,6 +23,7 @@
 
             span {
                 display: block;
+                will-change: transform;
             }
         }
         p {
@@ -80,6 +81,7 @@
             display: block;
             width: 100%;
             height: auto;
+            will-change: transform, opacity;
         }
 
         // Overlay
@@ -142,6 +144,7 @@
 
         span {
             display: block;
+            will-change: transform;
         }
 
         @include breakpoint (sm) {

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 {

src/style/pages/_homepage.scss

@@ -92,6 +92,10 @@
             margin-bottom: 200px;
             font-size: rem(248px);
         }
+
+        span {
+            will-change: transform;
+        }
     }
 
     // Massive title

src/style/pages/_page.scss

@@ -1,6 +1,11 @@
 .page {
     overflow-x: hidden;
 
+    // Page part
+    &__part {
+        will-change: transform, opacity;
+    }
+
     // Top part
     &__top {
         margin-top: 96px;
@@ -64,7 +69,9 @@
             margin-bottom: 40px;
         }
         dt {
-            margin-bottom: 8px;
+            @include breakpoint (sm) {
+                margin-bottom: 8px;
+            }
         }
     }
 

src/style/pages/_place.scss

@@ -78,6 +78,7 @@
         padding-top: pxVW(200);
         padding-bottom: 72px;
         background-color: $color-tertiary;
+        will-change: transform, opacity;
 
         @include breakpoint (m) {
             padding-bottom: 96px;
@@ -170,6 +171,7 @@
         background-position: 0 0;
         background-repeat: no-repeat;
         background-size: 100% auto;
+        will-change: transform, opacity;
 
         @include breakpoint (sm) {
             background-image: var(--url-desktop);

src/style/pages/_viewer.scss

@@ -3,6 +3,7 @@
     position: relative;
     height: 100vh;
     min-height: 560px;
+    padding-top: 16px;
 
     @include breakpoint (sm) {
         width: 100%;
@@ -10,6 +11,7 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        padding-top: 24px;
     }
 
 
@@ -18,7 +20,6 @@
     */
     &__top {
         z-index: 10;
-        margin-top: 16px;
         padding-left: 24px;
         padding-right: 16px;
         display: flex;
@@ -29,7 +30,7 @@
         @include breakpoint (sm) {
             // position: static;
             justify-content: center;
-            margin: 24px 0;
+            margin-bottom: 24px;
         }
 
         // Tip message