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'
+                })
             })
         }
     })