Transition: Don't animate height

So use a background div to squeeze and move other elements as well

src/animations/Transition.js

@@ -8,21 +8,22 @@ import { animDuration, animDurationLong } from '../utils/store'
 export const animateIn = scope => {
     // Panel itself
     const transition = anime({
-        targets: scope,
+        targets: scope.querySelector('.transition__background'),
-        height: ['100%', '100%'],
+        scaleY: [1, 1],
-        scale: [1.1, 1],
         opacity: [0, 1],
         duration: 400,
-        delay: 0,
+        easing: 'easeInOutQuart',
-        easing: 'easeInOutQuart'
+        begin () {
+            // Show the panel
+            scope.classList.remove('hidden')
+        }
     })
     // Globe icon
     const globe = anime({
         targets: scope.querySelector('svg'),
         opacity: [0, 1],
-        translateY: [32, 0],
+        translateY: ['16px', 0],
         duration: 400,
-        delay: 0,
         easing: 'easeInOutQuart'
     })
 
@@ -33,31 +34,39 @@ export const animateIn = scope => {
 ** Transition Out
 */
 export const animateOut = (scope, callback) => {
-    // Panel itself
+    // Background
-    const transition = anime({
+    const background = anime({
-        targets: scope,
+        targets: scope.querySelector('.transition__background'),
-        height: ['100%', 0],
+        scaleY: [1, 0],
         duration: animDurationLong,
         delay: 800,
         easing: 'easeInOutQuart',
-        complete: callback
+        complete () {
+            // Hide the panel
+            scope.classList.add('hidden')
+
+            // Run callback
+            callback()
+        }
     })
 
     // Title
     const title = anime({
         targets: scope.querySelector('.title-location'),
-        opacity: 0,
+        opacity: [1, 0],
-        duration: 600,
+        translateY: [0, '-50vh'],
-        delay: 1400,
+        duration: animDuration,
+        delay: 1000,
         easing: 'easeInOutQuart'
     })
 
     // Globe icon
     const globe = anime({
         targets: scope.querySelector('svg'),
-        opacity: 0,
+        opacity: [1, 0],
-        duration: 600,
+        translateY: [0, '-50vh'],
-        delay: 1400,
+        duration: animDuration,
+        delay: 1000,
         easing: 'easeInOutQuart'
     })
 }

src/style/_animations.scss

@@ -7,13 +7,35 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 1000;
+    z-index: 10000;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: $color-primary;
+    will-change: transform;
-    will-change: height, transform, padding-top, padding-bottom;
+
+    // Content
+    &__loader {
+        position: relative;
+        z-index: 2;
+    }
+
+    // Background
+    &__background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: $color-primary;
+        transform-origin: 50% 0;
+        will-change: transform;
+    }
+
+    // Hidden
+    &.hidden {
+        display: none;
+    }
 }
 
 

src/utils/Transition.svelte

@@ -24,16 +24,18 @@
     let firstLoad = true
 
     // 1. Watch page change
-    page.subscribe(() => {
+    page.subscribe(page => {
-        // Run the loader animation (only after first load)
+        if (!page.params.photo) {
-        if (!firstLoad && process.browser) {
+            // Run the loader animation (only after first load)
-            animateIn(scope)
+            if (!firstLoad && process.browser) {
+                animateIn(scope)
+            }
+
+            // TODO: Figure out how to delay the page rendering a little bit before the end of the transition panel ending
+
+            // Set pageReady to false (?)
+            pageReady.set(false)
         }
-
-        // TODO: Figure out how to delay the page rendering a little bit before the end of the transition panel ending
-
-        // Set pageReady to false (?)
-        pageReady.set(false)
     })
 
     // 2. Watch when loaded changes
@@ -60,7 +62,7 @@
 </script>
 
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
-    <div class="loader">
+    <div class="transition__loader">
         {#if firstLoad}
         <TitleSite />
 
@@ -68,4 +70,5 @@
         <IconGlobe width="44" color="#fff" animated="true" />
         {/if}
     </div>
+    <div class="transition__background" />
 </div>