WIP attempt to fix page transitions, Several edits

2020-04-02 16:07:16 +02:00
parent 6f409c5331
commit 730eb75457
34 changed files with 386 additions and 401 deletions
--- a/package.json
+++ b/package.json
@@ -51,12 +51,12 @@
    "postcss": "^7.0.27",
    "postcss-load-config": "^2.1.0",
    "postcss-preset-env": "^6.7.0",
-    "rollup": "^2.3.1",
+    "rollup": "^2.3.2",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-eslint": "^7.0.0",
    "rollup-plugin-svelte": "^5.2.0",
    "rollup-plugin-terser": "^5.3.0",
-    "sapper": "^0.27.11",
+    "sapper": "^0.27.12",
    "svelte": "^3.20.1",
    "svelte-preprocess": "^3.7.1"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,10 +15,10 @@ devDependencies:
  '@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0
  '@babel/preset-env': 7.9.0_@babel+core@7.9.0
  '@babel/runtime': 7.9.2
-  '@rollup/plugin-alias': 3.0.1_rollup@2.3.1
-  '@rollup/plugin-commonjs': 11.0.2_rollup@2.3.1
-  '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.1
-  '@rollup/plugin-replace': 2.3.1_rollup@2.3.1
+  '@rollup/plugin-alias': 3.0.1_rollup@2.3.2
+  '@rollup/plugin-commonjs': 11.0.2_rollup@2.3.2
+  '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.2
+  '@rollup/plugin-replace': 2.3.1_rollup@2.3.2
  autoprefixer: 9.7.5
  babel-plugin-module-resolver: 4.0.0
  dotenv: 8.2.0
@@ -33,12 +33,12 @@ devDependencies:
  postcss: 7.0.27
  postcss-load-config: 2.1.0
  postcss-preset-env: 6.7.0
-  rollup: 2.3.1
-  rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.1
+  rollup: 2.3.2
+  rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.2
  rollup-plugin-eslint: 7.0.0
-  rollup-plugin-svelte: 5.2.0_rollup@2.3.1+svelte@3.20.1
-  rollup-plugin-terser: 5.3.0_rollup@2.3.1
-  sapper: 0.27.11_svelte@3.20.1
+  rollup-plugin-svelte: 5.2.0_rollup@2.3.2+svelte@3.20.1
+  rollup-plugin-terser: 5.3.0_rollup@2.3.2
+  sapper: 0.27.12_svelte@3.20.1
  svelte: 3.20.1
  svelte-preprocess: 3.7.1_svelte@3.20.1
 lockfileVersion: 5.1
@@ -892,23 +892,23 @@ packages:
    dev: false
    resolution:
      integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
-  /@rollup/plugin-alias/3.0.1_rollup@2.3.1:
+  /@rollup/plugin-alias/3.0.1_rollup@2.3.2:
    dependencies:
-      rollup: 2.3.1
+      rollup: 2.3.2
      slash: 3.0.0
    dev: true
    peerDependencies:
      rollup: ^1.20.0
    resolution:
      integrity: sha512-ReSy6iPl3GsWLMNeshXAfgItZFMoMOTYC7MZQQM5va4pqxiGgwl1xZUZfHW6zGyZPK+k8TBadxx+kdmepiUa+g==
-  /@rollup/plugin-commonjs/11.0.2_rollup@2.3.1:
+  /@rollup/plugin-commonjs/11.0.2_rollup@2.3.2:
    dependencies:
-      '@rollup/pluginutils': 3.0.8_rollup@2.3.1
+      '@rollup/pluginutils': 3.0.8_rollup@2.3.2
      estree-walker: 1.0.1
      is-reference: 1.1.4
      magic-string: 0.25.7
      resolve: 1.15.1
-      rollup: 2.3.1
+      rollup: 2.3.2
    dev: true
    engines:
      node: '>= 8.0.0'
@@ -916,14 +916,14 @@ packages:
      rollup: ^1.20.0
    resolution:
      integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==
-  /@rollup/plugin-node-resolve/7.1.1_rollup@2.3.1:
+  /@rollup/plugin-node-resolve/7.1.1_rollup@2.3.2:
    dependencies:
-      '@rollup/pluginutils': 3.0.8_rollup@2.3.1
+      '@rollup/pluginutils': 3.0.8_rollup@2.3.2
      '@types/resolve': 0.0.8
      builtin-modules: 3.1.0
      is-module: 1.0.0
      resolve: 1.15.1
-      rollup: 2.3.1
+      rollup: 2.3.2
    dev: true
    engines:
      node: '>= 8.0.0'
@@ -931,20 +931,20 @@ packages:
      rollup: ^1.20.0
    resolution:
      integrity: sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA==
-  /@rollup/plugin-replace/2.3.1_rollup@2.3.1:
+  /@rollup/plugin-replace/2.3.1_rollup@2.3.2:
    dependencies:
-      '@rollup/pluginutils': 3.0.8_rollup@2.3.1
+      '@rollup/pluginutils': 3.0.8_rollup@2.3.2
      magic-string: 0.25.7
-      rollup: 2.3.1
+      rollup: 2.3.2
    dev: true
    peerDependencies:
      rollup: ^1.20.0
    resolution:
      integrity: sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A==
-  /@rollup/pluginutils/3.0.8_rollup@2.3.1:
+  /@rollup/pluginutils/3.0.8_rollup@2.3.2:
    dependencies:
      estree-walker: 1.0.1
-      rollup: 2.3.1
+      rollup: 2.3.2
    dev: true
    engines:
      node: '>= 8.0.0'
@@ -3792,11 +3792,11 @@ packages:
    hasBin: true
    resolution:
      integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.1:
+  /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.2:
    dependencies:
      '@babel/core': 7.9.0
      '@babel/helper-module-imports': 7.8.3
-      rollup: 2.3.1
+      rollup: 2.3.2
      rollup-pluginutils: 2.8.2
    dev: true
    peerDependencies:
@@ -3811,10 +3811,10 @@ packages:
    dev: true
    resolution:
      integrity: sha512-u35kXiY11ULeNQGTlRkYx7uGJ/hS/Dx3wj8f9YVC3oMLTGU9fOqQJsAKYtBFZU3gJ8Vt3gu8ppB1vnKl+7gatQ==
-  /rollup-plugin-svelte/5.2.0_rollup@2.3.1+svelte@3.20.1:
+  /rollup-plugin-svelte/5.2.0_rollup@2.3.2+svelte@3.20.1:
    dependencies:
      require-relative: 0.8.7
-      rollup: 2.3.1
+      rollup: 2.3.2
      rollup-pluginutils: 2.8.2
      sourcemap-codec: 1.4.8
      svelte: 3.20.1
@@ -3824,11 +3824,11 @@ packages:
      svelte: '*'
    resolution:
      integrity: sha512-6B7gRsJC/rS/ATEy3J51McsNgNcDFibRQ/L3rHsDMUYeCDCm3dsw3KEqf3WaxX0ZdApzZ1XWcnTXGQlwVPYpnQ==
-  /rollup-plugin-terser/5.3.0_rollup@2.3.1:
+  /rollup-plugin-terser/5.3.0_rollup@2.3.2:
    dependencies:
      '@babel/code-frame': 7.8.3
      jest-worker: 24.9.0
-      rollup: 2.3.1
+      rollup: 2.3.2
      rollup-pluginutils: 2.8.2
      serialize-javascript: 2.1.2
      terser: 4.6.7
@@ -3843,7 +3843,7 @@ packages:
    dev: true
    resolution:
      integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
-  /rollup/2.3.1:
+  /rollup/2.3.2:
    dev: true
    engines:
      node: '>=10.0.0'
@@ -3851,7 +3851,7 @@ packages:
    optionalDependencies:
      fsevents: 2.1.2
    resolution:
-      integrity: sha512-BRjzOauORe+R0U0I6SkMTSG22nYmtztR/TaBl0SvbXgc3VAxBDrZoB6HROiK0S5px1pUBnLnjBkbzmVuwC9Q1Q==
+      integrity: sha512-p66+fbfaUUOGE84sHXAOgfeaYQMslgAazoQMp//nlR519R61213EPFgrMZa48j31jNacJwexSAR1Q8V/BwGKBA==
  /run-async/2.4.0:
    dependencies:
      is-promise: 2.1.0
@@ -3879,7 +3879,7 @@ packages:
    dev: true
    resolution:
      integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-  /sapper/0.27.11_svelte@3.20.1:
+  /sapper/0.27.12_svelte@3.20.1:
    dependencies:
      html-minifier: 4.0.0
      http-link-header: 1.0.2
@@ -3892,7 +3892,7 @@ packages:
    peerDependencies:
      svelte: ^3.5.0
    resolution:
-      integrity: sha512-5EaPZhlc8OnyN3UCI6dRSM1Gz5sxyzLZG/1z5nMvZhg9Ng+rSvEvJx/rW/tSHcnQPa8or7+YcbfvQHKS5oPHiw==
+      integrity: sha512-xTvPQMb9L3J34Jd+6jSFeiuT8eQZ2D5TXPeJI9VO7h8t5nB2w78ZNQ4IlEPHsCMT2LZNLozygTb2plE4qH2XeQ==
  /sass-graph/2.2.4:
    dependencies:
      glob: 7.1.6
@@ -4555,12 +4555,12 @@ specifiers:
  postcss: ^7.0.27
  postcss-load-config: ^2.1.0
  postcss-preset-env: ^6.7.0
-  rollup: ^2.3.1
+  rollup: ^2.3.2
  rollup-plugin-babel: ^4.4.0
  rollup-plugin-eslint: ^7.0.0
  rollup-plugin-svelte: ^5.2.0
  rollup-plugin-terser: ^5.3.0
-  sapper: ^0.27.11
+  sapper: ^0.27.12
  scroll-out: ^2.2.8
  sirv: ^0.4.2
  svelte: ^3.20.1
--- a/src/animations/Carousel.js
+++ b/src/animations/Carousel.js
@@ -1,56 +1,39 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-// import { animDuration } from 'utils/store'
+import { transitionNormal, transitionDelay } from 'utils/store'


 /*
 ** Transition In
 */
 export const animateIn = scope => {
-    // Card: Active
-    const cardActive = ScrollOut({
-        once: true,
-        targets: scope.querySelector('.gallery__photo--active'),
-        onShown (el) {
-            anime({
-                targets: el,
-                top: [32, 0],
-                duration: 1200,
-                delay: 650,
-                easing: 'easeOutQuart'
-            })
-        }
+    // Timeline
+    const tl = anime.timeline({
+        easing: 'easeOutQuart',
+        duration: transitionNormal,
+        delay: transitionDelay
    })
+    // Photo: Active
+    tl.add({
+        targets: scope.querySelector('.is-active picture'),
+        translateY: [32, 0]
+    }, 400)
+    // Photo: Prev
+    tl.add({
+        targets: scope.querySelector('.is-prev picture'),
+        translateY: [8, 0],
+        translateX: [64, 0]
+    }, 550)
+    // Photo: Next
+    tl.add({
+        targets: scope.querySelector('.is-next picture'),
+        translateY: [8, 0],
+        translateX: [-48, 0]
+    }, 550)

-    // Card: Prev
-    const cardPrev = ScrollOut({
+    const carouselIn = ScrollOut({
        once: true,
-        targets: scope.querySelector('.gallery__photo--prev'),
-        onShown (el) {
-            anime({
-                targets: el,
-                top: [5, 0],
-                left: [-64, 0],
-                duration: 1200,
-                delay: 690,
-                easing: 'easeOutQuart'
-            })
-        }
-    })
-
-    // Card: Prev
-    const cardNext = ScrollOut({
-        once: true,
-        targets: scope.querySelector('.gallery__photo--next'),
-        onShown (el) {
-            anime({
-                targets: el,
-                top: [5, 0],
-                left: [48, 0],
-                duration: 1200,
-                delay: 710,
-                easing: 'easeOutQuart'
-            })
-        }
+        targets: scope,
+        onShown: () => tl.restart()
    })
 }
--- a/src/animations/Locations.js
+++ b/src/animations/Locations.js
@@ -1,6 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDuration } from 'utils/store'
+import { transitionLong } from 'utils/store'


 /*
--- a/src/animations/TitleSite.js
+++ b/src/animations/TitleSite.js
@@ -1,12 +1,12 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDuration } from 'utils/store'
+import { transitionDelay } from 'utils/store'


 /*
 ** Transition In
 */
-export const animateIn = scope => {
+export const animateIn = (scope, init) => {
    // On scroll animation
    const title = ScrollOut({
        once: true,
@@ -16,16 +16,16 @@ export const animateIn = scope => {
            anime({
                targets: el.querySelectorAll('span'),
                translateY: ['100%', 0],
-                delay: anime.stagger(40),
-                duration: 1000,
-                easing: 'easeOutQuart'
+                easing: 'easeOutQuart',
+                delay: anime.stagger(40, { start: init ? 0 : transitionDelay }),
+                duration: 1000
            })

            // Word in between
            anime({
                targets: el.querySelectorAll('em span'),
                opacity: [0, 1],
-                delay: anime.stagger(80, { start: 400 }),
+                delay: anime.stagger(80, { start: (init ? 0 : transitionDelay) + 400 }),
                duration: 1000,
                easing: 'easeOutQuart'
            })
--- a/src/animations/Transition.js
+++ b/src/animations/Transition.js
@@ -1,32 +1,34 @@
 import anime from 'animejs'
-import { animDuration, animDurationLong } from 'utils/store'
+import { transitionNormal, transitionLong, transitionPanelIn } from 'utils/store'


 /*
 ** Transition In
 */
 export const animateIn = scope => {
-    // Panel itself
-    const transition = anime({
-        targets: scope.querySelector('.transition__background'),
-        scaleY: [1, 1],
-        opacity: [0, 1],
-        duration: 400,
+    const tl = anime.timeline({
+        duration: transitionPanelIn,
        easing: 'easeInOutQuart',
-        begin () {
+        begin: () => {
            // Show the panel
            scope.classList.remove('hidden')
        }
    })
+
+    // Panel itself
+    tl.add({
+        targets: scope.querySelector('.transition__background'),
+        scaleY: [1, 1],
+        opacity: [0, 1],
+        duration: transitionPanelIn
+    }, 0)
    // Globe icon
-    const globe = anime({
+    tl.add({
        targets: scope.querySelector('svg'),
        opacity: [0, 1],
-        translateY: ['16px', 0],
-        duration: 400,
-        easing: 'easeInOutQuart'
-    })
-
+        translateY: ['3vh', 0],
+        duration: transitionPanelIn
+    }, 0)
 }


@@ -34,14 +36,9 @@ export const animateIn = scope => {
 ** Transition Out
 */
 export const animateOut = (scope, callback) => {
-    // Background
-    const background = anime({
-        targets: scope.querySelector('.transition__background'),
-        scaleY: [1, 0],
-        duration: animDurationLong,
-        delay: 800,
+    const tl = anime.timeline({
        easing: 'easeInOutQuart',
-        complete () {
+        complete: () => {
            // Hide the panel
            scope.classList.add('hidden')

@@ -50,23 +47,29 @@ export const animateOut = (scope, callback) => {
        }
    })

+    // Background
+    tl.add({
+        targets: scope.querySelector('.transition__background'),
+        scaleY: [1, 0],
+        duration: transitionLong
+    }, 600)
+
    // Title
-    const title = anime({
+    tl.add({
        targets: scope.querySelector('.title-location'),
        opacity: [1, 0],
        translateY: [0, '-50vh'],
-        duration: animDuration,
-        delay: 1000,
-        easing: 'easeInOutQuart'
-    })
+        duration: transitionNormal
+    }, 850)

    // Globe icon
-    const globe = anime({
+    tl.add({
        targets: scope.querySelector('svg'),
        opacity: [1, 0],
        translateY: [0, '-50vh'],
-        duration: animDuration,
-        delay: 1000,
-        easing: 'easeInOutQuart'
-    })
+        duration: transitionNormal
+    }, 850)
+
+    // Play
+    tl.play()
 }
--- a/src/animations/index.js
+++ b/src/animations/index.js
@@ -1,6 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDuration } from 'utils/store'
+import { transitionNormal, transitionLong, transitionDelay } from 'utils/store'
 import { throttle, parallaxAnime } from 'utils/functions'


@@ -9,67 +9,65 @@ import { throttle, parallaxAnime } from 'utils/functions'
 */
 export const animateIn = () => {
    // Title: Houses
-    const titleHouses = ScrollOut({
-        once: true,
-        targets: '#title-houses',
-        onShown (el) {
+    // const titleHouses = ScrollOut({
+    //     once: true,
+    //     targets: '#title-houses',
+    //     onShown (el) {
            // Reveal each letter
-            anime({
-                targets: el.querySelectorAll('span'),
-                translateY: ['-70%', 0],
-                delay: anime.stagger(80),
-                duration: animDuration,
-                easing: 'easeOutQuart'
-            })
-
-            // Parallax on scroll
-            const translate = anime({
-                targets: el,
-                translateX: ['7%', '-15%'],
-                easing: 'linear',
-                autoplay: false,
-                duration: animDuration
-            })
-            window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
-            setTimeout(() => parallaxAnime(el, translate), 50)
-        },
-        onHidden () {
-            window.removeEventListener('scroll', parallaxAnime)
-        }
+    anime({
+        targets: document.querySelectorAll('#title-houses span'),
+        translateY: ['-70%', 0],
+        delay: anime.stagger(80, { start: transitionDelay }),
+        duration: transitionNormal,
+        easing: 'easeOutQuart'
    })

+    // Parallax on scroll
+    const translate = anime({
+        targets: '#title-houses',
+        translateX: ['7%', '-15%'],
+        easing: 'linear',
+        autoplay: false,
+        duration: transitionNormal
+    })
+    window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 10))
+    setTimeout(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
+    //     },
+    //     onHidden: () => window.removeEventListener('scroll', parallaxAnime)
+    // })
+
    // Intro: Description
-    const introDescription = ScrollOut({
-        once: true,
-        targets: '#intro-description',
-        onShown (el) {
-            anime({
-                targets: el.querySelectorAll('p, a'),
-                opacity: [0, 1],
-                translateY: [8, 0],
-                duration: animDuration,
-                delay: anime.stagger(200, { start: 400 }),
-                easing: 'easeOutQuart'
-            })
-        }
+    // const introDescription = ScrollOut({
+    //     once: true,
+    //     targets: '#intro-description',
+    //     onShown (el) {
+    anime({
+        targets: '#intro-description p, #intro-description a',
+        opacity: [0, 1],
+        translateY: [8, 0],
+        easing: 'easeOutQuart',
+        duration: transitionNormal,
+        delay: anime.stagger(200, { start: transitionDelay + 400 })
    })
+    //     }
+    // })

    // Intro: Carousel
-    const introCarousel = ScrollOut({
-        once: true,
+    // const introCarousel = ScrollOut({
+    //     once: true,
+    //     targets: '#intro-carousel',
+    //     onShown (el) {
+    anime({
        targets: '#intro-carousel',
-        onShown (el) {
-            anime({
-                targets: el,
-                opacity: [0, 1],
-                translateY: [24, 0],
-                duration: animDuration,
-                delay: 650,
-                easing: 'easeOutQuart',
-                complete: () => el.removeAttribute('style')
-            })
-        }
+        opacity: [0, 1],
+        translateY: [24, 0],
+        easing: 'easeOutQuart',
+        duration: transitionNormal,
+        delay: transitionDelay + 600,
+        complete: event => event.animatables[0].target.removeAttribute('style')
    })
+    //     }
+    // })

    // Title: Of
    const titleOf = ScrollOut({
@@ -79,9 +77,9 @@ export const animateIn = () => {
            anime({
                targets: el.querySelectorAll('span'),
                translateY: ['100%', 0],
+                easing: 'easeOutQuart',
                delay: anime.stagger(70),
-                duration: animDuration,
-                easing: 'easeOutQuart'
+                duration: transitionNormal
            })
        }
    })
@@ -94,9 +92,9 @@ export const animateIn = () => {
            anime({
                targets: el.querySelectorAll('span'),
                translateY: ['100%', 0],
+                easing: 'easeOutQuart',
                delay: anime.stagger(70),
-                duration: animDuration,
-                easing: 'easeOutQuart'
+                duration: transitionNormal
            })

            // Parallax on scroll
@@ -105,14 +103,27 @@ export const animateIn = () => {
                translateX: ['5%', '-3%'],
                easing: 'linear',
                autoplay: false,
-                duration: animDuration
+                duration: transitionNormal
            })

            window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
            setTimeout(() => parallaxAnime(el, translate), 50)
        },
-        onHidden() {
-            window.removeEventListener('scroll', parallaxAnime)
-        }
+        onHidden: () => window.removeEventListener('scroll', parallaxAnime)
+    })
+}
+
+
+
+/*
+** Transition Out
+*/
+export const animateOut = () => {
+    anime({
+        targets: document.querySelector('#title-houses'),
+        translateY: ['-70%', 0],
+        opacity: [1, 0],
+        duration: transitionNormal,
+        easing: 'easeOutQuart'
    })
 }
--- a/src/animations/page.js
+++ b/src/animations/page.js
@@ -1,25 +1,25 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDuration, animDurationLong } from 'utils/store'
+import { transitionNormal, transitionDelay } from 'utils/store'


 /*
 ** Transition In
 */
 export const animateIn = () => {
-    // Simple fade
-    const page = ScrollOut({
-        once: true,
-        targets: '.page',
-        onShown (el) {
-            anime({
-                targets: '.page__part',
-                opacity: [0, 1],
-                translateY: [8, 0],
-                duration: 1800,
-                delay: anime.stagger(220, { start: animDurationLong * 0.3 }),
-                easing: 'easeOutQuart'
-            })
-        }
+    // Simple slide and fade on each part of the page
+    // const page = ScrollOut({
+    //     once: true,
+    //     targets: '.page',
+    //     onShown (el) {
+    anime({
+        targets: document.querySelectorAll('.page__part'),
+        opacity: [0, 1],
+        translateY: [8, 0],
+        easing: 'easeOutQuart',
+        duration: transitionNormal,
+        delay: anime.stagger(220, { start: transitionDelay }),
    })
+    //     }
+    // })
 }
--- a/src/animations/place.js
+++ b/src/animations/place.js
@@ -1,6 +1,6 @@
 import anime from 'animejs'
 // import ScrollOut from 'scroll-out'
-import { animDuration } from 'utils/store'
+import { transitionNormal, transitionDelay } from 'utils/store'


 /*
@@ -9,7 +9,7 @@ import { animDuration } from 'utils/store'
 export const animateIn = () => {
    const tl = anime.timeline({
        duration: 1800,
-        delay: 1800,
+        delay: transitionDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
        easing: 'easeOutQuart'
    })

@@ -17,27 +17,27 @@ export const animateIn = () => {
    tl.add({
        targets: '.place__title_houses',
        translateY: ['150%', 0],
-        duration: animDuration
-    })
+        duration: transitionNormal
+    }, 200)
    // Title: Of
    tl.add({
        targets: '.place__title_of',
        opacity: [0, 1],
-        duration: 800
-    }, 550)
+        duration: transitionNormal
+    }, 800)
    // Title: Place name
    tl.add({
        targets: '.place__title_name',
        translateY: ['150%', 0],
-        duration: animDuration
-    }, 200)
+        duration: transitionNormal
+    }, 350)

    // Switcher link
    tl.add({
        targets: '.place__title .button-control',
        scale: [0.95, 1],
        opacity: [0, 1],
-        duration: animDuration
+        duration: transitionNormal
    }, 700)

    // Illustration
@@ -45,7 +45,7 @@ export const animateIn = () => {
        targets: '.place__illustration',
        scale: [1.075, 1],
        opacity: [0, 1],
-        duration: animDuration
+        duration: transitionNormal
    }, 200)

    // Description
@@ -53,8 +53,8 @@ export const animateIn = () => {
        targets: '.place__description',
        opacity: [0, 1],
        translateY: [24, 0],
-        duration: animDuration
-    }, 800)
+        duration: transitionNormal
+    }, 650)

    // Play
    tl.play()
--- a/src/animations/viewer.js
+++ b/src/animations/viewer.js
@@ -1,5 +1,5 @@
 import anime from 'animejs'
-import { animDuration } from 'utils/store'
+import { transitionNormal } from 'utils/store'


 /*
@@ -10,7 +10,7 @@ export const animateIn = () => {
    anime({
        targets: '.viewer__top p, .viewer__top .buttons a',
        translateY: [-32, 0],
-        duration: animDuration,
+        duration: transitionNormal,
        delay: anime.stagger(150, { start: 600 }),
        easing: 'easeOutQuart'
    })
@@ -20,7 +20,7 @@ export const animateIn = () => {
        targets: '.viewer .carousel',
        opacity: [0, 1],
        translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%'],
-        duration: animDuration,
+        duration: transitionNormal,
        delay: 300,
        easing: 'easeOutQuart'
    })
@@ -30,7 +30,7 @@ export const animateIn = () => {
        targets: '.viewer .carousel__number_column',
        opacity: [0, 1],
        marginTop: [24, 0],
-        duration: animDuration,
+        duration: transitionNormal,
        delay: anime.stagger(100, { start: 450 }),
        easing: 'easeOutQuart'
    })
--- a/src/atoms/IconGlobe.svelte
+++ b/src/atoms/IconGlobe.svelte
@@ -15,7 +15,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width={width} viewBox="0 0 56 75"
    fill={color}
-    class="icon-globe" class:icon-svg--animated={animated}
+    class="icon-svg icon-globe" class:is-animated={animated}
 >
    <defs>
        <clipPath id={randomId}>
--- a/src/atoms/IconGlobeSmall.svelte
+++ b/src/atoms/IconGlobeSmall.svelte
@@ -15,7 +15,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width={width} viewBox="0 0 56 56"
    fill={color}
-    class="icon-globe icon-globe--small" class:icon-svg--animated={animated}
+    class="icon-svg icon-globe icon-globe--small" class:is-animated={animated}
 >
    <defs>
        <clipPath id={randomId}>
--- a/src/atoms/TitleSite.svelte
+++ b/src/atoms/TitleSite.svelte
@@ -5,7 +5,8 @@
    // Animations
    import { animateIn } from 'animations/TitleSite'

-    // Variables
+    // Props and variables
+    export let init = false
    let scope
    let mounted = false

@@ -14,8 +15,8 @@
    ** Run code on component mount
    */
    onMount(() => {
+        animateIn(scope, init)
        mounted = true
-        animateIn(scope)
    })
 </script>

--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -56,7 +56,7 @@
    // Hover on controls
    const hoverPhoto = event => {
        const button = event.currentTarget.querySelector('button')
-        const photoActive = scope.querySelector('.gallery__photo--active')
+        const photoActive = scope.querySelector('.is-active')

        let photoToHover
        if (event.currentTarget.dataset.to === 'prev') {
@@ -114,7 +114,7 @@
    */
    onMount(() => {
        // Entering transition
-        if (photos.length) {
+        if (photos) {
            animateIn(scope)
        }

@@ -134,7 +134,7 @@

 <svelte:window on:keydown={keyboardNav} />

-{#if photos.length}
+{#if photos}
 <div class="carousel"
    bind:this={scope}
    on:swipe={event => swipe(event.detail.directions)}
@@ -143,18 +143,20 @@
        <div class="gallery">
            <div class="gallery__images">
                {#each photos as { id, name, location, image }, index}
-                <picture class="gallery__photo"
-                    class:gallery__photo--prev={id === prevPhoto.id}
-                    class:gallery__photo--active={id === currentPhoto.id}
-                    class:gallery__photo--next={id === nextPhoto.id}
+                <div class="gallery__photo"
+                    class:is-prev={id === prevPhoto.id}
+                    class:is-active={id === currentPhoto.id}
+                    class:is-next={id === nextPhoto.id}
                    on:click={openFullscreen}
                >
-                    <source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
-                    <source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
-                    <source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
-                    <source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
-                    <img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
-                </picture>
+                    <picture class="gallery__picture">
+                        <source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
+                        <source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
+                        <source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
+                        <source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
+                        <img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
+                    </picture>
+                </div>
                {/each}
            </div>

@@ -189,9 +191,9 @@
            <div class="carousel__locations">
                {#each photos as { id, name, location }, index}
                <div class="carousel__location style-location"
-                    class:carousel__location--prev={id === prevPhoto.id}
-                    class:carousel__location--active={id === currentPhoto.id}
-                    class:carousel__location--next={id === nextPhoto.id}
+                    class:is-prev={id === prevPhoto.id}
+                    class:is-active={id === currentPhoto.id}
+                    class:is-next={id === nextPhoto.id}
                >
                    <p class="street">{name}</p>
                    <p class="state style-caps style-caps--transparent">
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -70,7 +70,8 @@
        site,
        continents,
        countries,
-        locations
+        locations,
+        pageReady
    } from 'utils/store'

    // Components
@@ -106,7 +107,9 @@
    <link rel="canonical" href={`https://${$page.host}${$page.path}`} />
 </svelte:head>

-<slot></slot>
+<main class="housesof" style="opacity: { $pageReady ? 1 : 0}">
+    <slot></slot>
+</main>

 {#if process.env.CONFIG.TRANSITION === 'true'}
 <Transition />
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -75,9 +75,9 @@
            {/each}
        </div>
        {/if}
-
-        <InteractiveGlobe type="part" />
    </div>

+    <InteractiveGlobe type="part" />
+
    <Footer />
 </section>
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -24,7 +24,7 @@
 </script>

 <script>
-    import { onMount } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
    import { stores } from '@sapper/app'
    import {
        apiEndpoints,
@@ -56,7 +56,7 @@
    pageTransition.onAnimationEnd = animateIn

    // Props and variables
-    export let photos
+    export let photos = ''
    const { page } = stores()

    // Reset current location if existing
@@ -106,9 +106,10 @@
    </div>

    <div id="intro-carousel">
+        {#if photos}
        <Carousel {photos} />
-
        <Fullscreen />
+        {/if}
    </div>
 </section>

--- a/src/routes/location/[country]/[place].svelte
+++ b/src/routes/location/[country]/[place].svelte
@@ -6,7 +6,8 @@
        // Load photos
        const fields = [
            'id', 'name', 'slug', 'date', 'image.private_hash',
-            'location.id', 'location.name', 'location.slug', 'location.region', 'location.country.name', 'location.country.slug',
+            'location.id', 'location.name', 'location.slug', 'location.region',
+            'location.country.name', 'location.country.slug',
            'created_on', 'modified_on'
        ].join(',')
        const sort = ['-created_on', 'name'].join(',')
@@ -58,6 +59,7 @@

    // Update current location
    const location = $locations.find(loc => loc.slug === $page.params.place)
+    const { description, country, illustration_desktop, illustration_mobile } = location
    currentLocation.set(location)
    currentPhotos.set(photos)

@@ -96,12 +98,12 @@
 </script>

 <svelte:head>
-    <title>{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}</title>
-    <meta name="description" content="{$site.seo_name} {location.name} {location.description}">
+    <title>{$site.seo_name} – Beautiful houses of {location.name}, {country.name}</title>
+    <meta name="description" content="{$site.seo_name} {location.name} {description}">
    <SocialMetas
-        url="https://{$page.host}/location/{location.country.slug}/{location.slug}"
-        title="{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}"
-        description="{$site.seo_name} {location.name} {location.description}"
+        url="https://{$page.host}/location/{country.slug}/{location.slug}"
+        title="{$site.seo_name} – Beautiful houses of {location.name}, {country.name}"
+        description="{$site.seo_name} {location.name} {description}"
        image={latestPhoto ? getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}
    />
 </svelte:head>
@@ -135,17 +137,17 @@
            <div class="wrapper">
                <p>{$site.description}</p>

-                {#if location.description}
+                {#if description}
                <p>
                    Houses Of
                    <LinkChange href="/choose" text={location.name} noScroll="true">
                        <IconGlobeSmall width="14" color="#999" />
                    </LinkChange>
-                    {location.description}
+                    {description}
                </p>
                {/if}

-                {#if photos.length}
+                {#if photos}
                <p class="updated style-caps">
                    <strong>Updated</strong>
                    <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -157,9 +159,9 @@
        </div>
    </div>

-    {#if location.illustration_desktop && location.illustration_mobile}
+    {#if illustration_desktop && illustration_mobile}
    <div class="place__illustration"
-        style="--url-desktop: url({location.illustration_desktop.full_url}); --url-mobile: url({location.illustration_mobile.full_url});"
+        style="--url-desktop: url({illustration_desktop.full_url}); --url-mobile: url({illustration_mobile.full_url});"
    />
    {/if}
 </section>
@@ -169,7 +171,7 @@
        <aside class="photos__side">
            <Switcher type="switcher--side" />

-            {#if photos.length}
+            {#if photos}
            <p class="updated style-caps">
                <strong>Updated</strong>
                <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -178,7 +180,7 @@
        </aside>
    </div>

-    {#if photos.length}
+    {#if photos}
    <div class="photos__view wrap">
        {#each paginatedPhotos as photo, index}
        <Photo
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -78,7 +78,7 @@
        background-color: $color-secondary;

        svg {
-            fill: #fff !important;
+            fill: #fff;
        }
        .anim {
            animation-play-state: running;
--- a/src/style/atoms/_icon-globe.scss
+++ b/src/style/atoms/_icon-globe.scss
@@ -19,7 +19,7 @@
    }

    // Animate by default
-    &--animated {
+    &.is-animated {
        .anim {
            animation-play-state: running;
        }
--- a/src/style/layouts/_main.scss
+++ b/src/style/layouts/_main.scss
@@ -0,0 +1,5 @@
+// Main page
+.housesof {
+    transition: opacity 0.4s $ease-quart;
+    will-change: opacity;
+}
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -1,6 +1,11 @@
 // Carousel
 .carousel {
    background-color: $color-primary;
+    overflow: hidden;
+
+    @include breakpoint (sm) {
+        overflow: visible;
+    }

    .wrap {
        max-width: 1280px;
@@ -52,7 +57,6 @@
        &__photo {
            $duration: 1s;
            opacity: 0;
-            overflow: hidden;
            position: absolute;
            z-index: -1;
            top: 0;
@@ -60,21 +64,78 @@
            width: 100%;
            height: 100%;
            transform: scale($scale);
-            box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
            transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
            will-change: transform, opacity, top, left;

-            @include breakpoint (sm) {
-                border-radius: $radius;
+            // Active photo
+            &.is-active {
+                opacity: 1;
+                z-index: 10;
+                transform: scale(1);
+
+                img {
+                    opacity: 1;
+                }
            }

-            img {
-                opacity: 0;
-                position: relative;
-                z-index: 1;
-                display: block;
-                width: 100%;
-                height: auto;
+            // Previous & next photo
+            &.is-prev, &.is-next {
+                opacity: 1;
+
+                img {
+                    opacity: 1;
+                }
+
+                picture:before {
+                    @include breakpoint (sm) {
+                        opacity: 0.4;
+                    }
+                }
+            }
+
+            // Previous photo
+            &.is-prev {
+                z-index: 9;
+                transform: translate(-40%, 0) scale(0.85);
+
+                @include breakpoint (sm) {
+                    z-index: 8;
+                    transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
+                }
+
+                // Hover
+                &.hover {
+                    transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
+                }
+            }
+
+            // Next photo
+            &.is-next {
+                z-index: 8;
+                transform: translate(40%, 0) scale(0.85);
+
+                @include breakpoint (sm) {
+                    z-index: 9;
+                    transform: translate($distance, -1%) rotate($angle) scale($scale);
+                }
+
+                // Hover
+                &.hover {
+                    transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
+                }
+            }
+        }
+
+        // Picture
+        &__picture {
+            display: block;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
+
+            @include breakpoint (sm) {
+                border-radius: $radius;
            }

            // Overlay
@@ -91,62 +152,13 @@
                background-color: $color-primary;
            }

-            // Active photo
-            &--active {
-                opacity: 1;
-                z-index: 10;
-                transform: scale(1);
-
-                img {
-                    opacity: 1;
-                }
-            }
-
-            // Previous & next photo
-            &--prev, &--next {
-                opacity: 1;
-
-                img {
-                    opacity: 1;
-                }
-
-                &:before {
-                    @include breakpoint (sm) {
-                        opacity: 0.4;
-                    }
-                }
-            }
-
-            // Previous photo
-            &--prev {
-                z-index: 9;
-                transform: translate(-40%, 0) scale(0.85);
-
-                @include breakpoint (sm) {
-                    z-index: 8;
-                    transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
-                }
-
-                // Hover
-                &.hover {
-                    transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
-                }
-            }
-
-            // Next photo
-            &--next {
-                z-index: 8;
-                transform: translate(40%, 0) scale(0.85);
-
-                @include breakpoint (sm) {
-                    z-index: 9;
-                    transform: translate($distance, -1%) rotate($angle) scale($scale);
-                }
-
-                // Hover
-                &.hover {
-                    transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
-                }
+            img {
+                opacity: 0;
+                position: relative;
+                z-index: 1;
+                display: block;
+                width: 100%;
+                height: auto;
            }
        }
    }
@@ -193,7 +205,7 @@


    /*
-    ** Information
+    ** Informations
    */
    &__infos {
        position: relative;
@@ -232,14 +244,14 @@
        }

        // States
-        &--prev {
+        &.is-prev {
            transform: translateY(-$distance);
        }
-        &--active {
+        &.is-active {
            transform: translateY(0);
            opacity: 1;
        }
-        &--next {
+        &.is-next {
            transform: translateY($distance);
        }

@@ -312,44 +324,3 @@
        }
    }
 }
-
-
-/*
-** Zoomer
-*/
-.zoomer {
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    z-index: 101;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-
-    &.show {
-        opacity: 1;
-        pointer-events: auto;
-    }
-
-    // Image
-    &__image {
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-
-        img {
-            display: block;
-            height: 100%;
-            width: auto;
-        }
-    }
-
-    // Button
-    .button-control {
-        position: absolute;
-        bottom: 32px;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-}
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -38,6 +38,7 @@
        @include breakpoint (sm) {
            display: flex;
            align-items: center;
+            padding-top: 6px;
        }

        li {
@@ -49,6 +50,7 @@
                display: flex;
                justify-content: center;
                margin-bottom: 32px;
+                margin-top: 3px;

                @include breakpoint (sm) {
                    margin-bottom: 0;
@@ -56,7 +58,7 @@
                }

                li {
-                    margin: 3px 20px 0;
+                    margin-right: 20px;
                }
                a {
                    display: block;
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -1,6 +1,7 @@
 .browse {
    margin-top: 72px;
    margin-bottom: 72px;
+    overflow-x: hidden;

    @include breakpoint (sm) {
        margin-top: 120px;
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -50,10 +50,8 @@
        }

        // Photos
-        .gallery__photo {
-            &:before {
-                background-color: $color-secondary;
-            }
+        .gallery__picture:before {
+            background-color: $color-secondary;
        }
    }
 }
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -37,6 +37,7 @@
@import "organisms/footer";

 // Layouts
+@import "layouts/main";
@import "layouts/explore";

 // Pages
--- a/src/utils/AnalyticsTracker.svelte
+++ b/src/utils/AnalyticsTracker.svelte
@@ -23,5 +23,7 @@
 </script>

 <svelte:head>
+    {#if process.env.NODE_ENV !== 'development'}
    <script async src="https://www.googletagmanager.com/gtag/js?id={id}"></script>
+    {/if}
 </svelte:head>
--- a/src/utils/Transition.svelte
+++ b/src/utils/Transition.svelte
@@ -1,6 +1,12 @@
 <script>
    import { stores } from '@sapper/app'
-    import { pageReady, animDurationLong, pageTransition } from './store'
+    import {
+        pageReady,
+        pageTransition,
+        transitionLong,
+        transitionPanelIn,
+        transitionDelay
+    } from './store'
    const { page } = stores()

    // Components
@@ -11,6 +17,9 @@
    import { animateIn, animateOut } from 'animations/Transition'


+    // Check if path is excluded
+    const isExcluded = path => path.includes(['/viewer/'])
+
    /*
    ** PAGE LOADING PROCESS
    ** 1. Set pageReady to false
@@ -24,21 +33,16 @@
    let firstLoad = true
    let previousPage = ''

-    // Check if viewer
-    const isExcluded = path => path.includes(['/viewer/'])
-
    // 1. Watch page change
    page.subscribe(page => {
        // Run transition if page is not excluded
        if (!isExcluded(previousPage) || !isExcluded(page.path)) {
-            // Run the loader animation (only after first load)
+            // Run the loader animation (first load only)
            if (!firstLoad) {
                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 (?)
+            // Reset pageReady when changing page
            pageReady.set(false)
        }

@@ -49,19 +53,13 @@
    // 2. Watch when loaded changes
    pageReady.subscribe(loaded => {
        if (loaded) {
-            // 3. Hide the loader
-            setTimeout(() => {
-                // Also sets firstLoad to false in order to show the second icon afterwards
-                animateOut(scope, () => firstLoad = false)
-            }, 400) // This duration allows to not come over the transition In
-            // [OU ALORS] les pages changent la valeur de loaded plus tard
+            // 3. Hide the loader and set firstLoad to false (in order to show the second icon afterwards)
+            animateOut(scope, () => firstLoad = false)

            // Scroll back to top of page
-            setTimeout(() => {
-                window.scrollTo(0,0)
-            }, animDurationLong * 0.75 + 400)
+            setTimeout(() => window.scrollTo(0,0), transitionDelay)

-            // 4. Run the page's transition in, but a little bit before the end of the loader
+            // 4. Run page entering animation
            pageTransition.onAnimationEnd()
        }
    })
@@ -70,7 +68,7 @@
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
    <div class="transition__loader">
        {#if firstLoad}
-        <TitleSite />
+        <TitleSite init="true" />

        {:else}
        <IconGlobe width="44" color="#fff" animated="true" />
--- a/src/utils/functions.js
+++ b/src/utils/functions.js
@@ -163,15 +163,17 @@ export const relativeTime = (originDate, limit = 0) => {
 ** Controls Anime.js parallax
 */
 export const parallaxAnime = (element, anime) => {
-    const bound = element.getBoundingClientRect()
-    const windowHeight = window.innerHeight
-    if (bound.top < windowHeight && bound.bottom > 0) {
-        anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
-    } else {
-        if (bound.top >= windowHeight) {
-            anime.seek(0)
-        } else if (bound.bottom <= 0) {
-            anime.seek(anime.duration)
+    if (element) {
+        const bound = element.getBoundingClientRect()
+        const windowHeight = window.innerHeight
+        if (bound.top < windowHeight && bound.bottom > 0) {
+            anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
+        } else {
+            if (bound.top >= windowHeight) {
+                anime.seek(0)
+            } else if (bound.bottom <= 0) {
+                anime.seek(anime.duration)
+            }
        }
    }
 }
--- a/src/utils/store.js
+++ b/src/utils/store.js
@@ -35,5 +35,7 @@ export let fullscreen = writable()
 /* ==========================================================================
   Animation related
 ========================================================================== */
-export const animDuration = 1400
-export const animDurationLong = 1800
+export const transitionDelay = 1400
+export const transitionNormal = 1400
+export const transitionLong = 1800
+export const transitionPanelIn = 700
--- a/static/img/favicon.png
+++ b/static/img/favicon.png
--- a/static/img/icons/instagram.svg
+++ b/static/img/icons/instagram.svg
@@ -1,3 +0,0 @@
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-  <path d="M11.245 0c1.615.005 2.002.02 2.878.06 1.064.048 1.791.217 2.427.464a4.902 4.902 0 0 1 1.772 1.154 4.902 4.902 0 0 1 1.153 1.771c.247.636.416 1.363.465 2.428.042.914.056 1.295.06 3.095v2.055c-.004 1.8-.018 2.182-.06 3.096-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 0 1-1.153 1.772 4.902 4.902 0 0 1-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.049-1.407.06-4.123.06s-3.057-.011-4.124-.06c-1.064-.049-1.79-.218-2.427-.465a4.902 4.902 0 0 1-1.771-1.153A4.902 4.902 0 0 1 .524 16.55c-.247-.636-.416-1.363-.465-2.427C.02 13.247.005 12.86 0 11.245v-2.49c.005-1.616.02-2.002.06-2.878.048-1.065.217-1.792.464-2.428a4.902 4.902 0 0 1 1.154-1.771A4.902 4.902 0 0 1 3.448.524C4.086.277 4.813.108 5.877.06 6.753.02 7.14.005 8.754 0zm-.204 1.802H8.958c-1.739.003-2.101.016-3 .057-.974.045-1.504.208-1.856.345-.467.181-.8.398-1.15.748-.35.35-.567.683-.748 1.15-.137.352-.3.882-.345 1.857-.04.898-.054 1.26-.057 2.999v2.083c.003 1.739.016 2.101.057 3 .045.975.208 1.504.345 1.857.181.466.398.8.748 1.15.35.35.683.566 1.15.747.352.137.882.3 1.857.345 1.054.048 1.37.058 4.04.058h.288c2.407 0 2.738-.012 3.754-.058.975-.045 1.504-.208 1.857-.345.466-.18.8-.398 1.15-.748.35-.35.566-.683.747-1.15.137-.352.3-.881.345-1.856.048-1.055.058-1.371.058-4.041v-.288c0-2.407-.012-2.738-.058-3.753-.045-.975-.208-1.505-.345-1.857a3.098 3.098 0 0 0-.748-1.15 3.099 3.099 0 0 0-1.15-.748c-.352-.137-.881-.3-1.856-.345-.899-.04-1.261-.054-3-.057zM10 4.864a5.135 5.135 0 1 1 0 10.271 5.135 5.135 0 0 1 0-10.27zm0 1.802a3.334 3.334 0 1 0 0 6.667 3.334 3.334 0 0 0 0-6.667zm5.338-3.205a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z" fill="#FFF" fill-rule="evenodd"/>
-</svg>
--- a/static/img/illustration.png
+++ b/static/img/illustration.png
--- a/static/img/siteicon.png
+++ b/static/img/siteicon.png