Photo transition: Wait for image to be loaded

src/animations/Photo.js

@@ -1,5 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
+import imagesLoaded from 'imagesloaded'
 import { animDuration, animDurationLong } from '../utils/store'
 import { throttle, parallaxAnime } from '../utils/functions'
 
@@ -29,14 +30,16 @@ export const animateIn = scope => {
         once: true,
         targets: scope.querySelector('picture'),
         onShown (el) {
-            // Title reveal
-            anime({
-                targets: el.querySelector('img'),
-                scale: [1.12, 1],
-                opacity: [0, 1],
-                duration: 2000,
-                delay: 50,
-                easing: 'easeOutQuart'
+            // Load the photo then reveal it
+            imagesLoaded(el, instance => {
+                anime({
+                    targets: el.querySelector('img'),
+                    scale: [1.12, 1],
+                    opacity: [0, 1],
+                    duration: 2000,
+                    delay: 50,
+                    easing: 'easeOutQuart'
+                })
             })
         }
     })

src/atoms/TitleSite.svelte

@@ -3,7 +3,7 @@
     import { charsToSpan } from '../utils/functions'
 
     // Animations
-    import { animateIn } from '../animations/TitleSite.js'
+    import { animateIn } from '../animations/TitleSite'
 
     // Variables
     let scope

src/routes/_layout.svelte

@@ -77,8 +77,7 @@
     import Transition from '../utils/Transition'
     import AnalyticsTracker from '../utils/AnalyticsTracker'
 
-    // Props and variables
-    export const segment = null
+    // Variables
     const { page } = stores()