Last little fixes and debugging

src/animations/Carousel.js

@@ -10,7 +10,6 @@ export const animateIn = scope => {
     const tl = anime.timeline({
         easing: 'easeOutQuart',
         duration: animDuration,
-        // delay: animDelay,
         autoplay: false
     })
 
@@ -27,7 +26,8 @@ export const animateIn = scope => {
     tl.add({
         targets: scope.querySelector('.is-active picture'),
         translateY: [8, 0],
-        translateZ: [0, 0]
+        translateZ: [0, 0],
+        complete: event => event.animatables[0].target.removeAttribute('style')
     }, 100)
 
     // Photo: Prev
@@ -36,7 +36,8 @@ export const animateIn = scope => {
         translateY: [8, 0],
         translateX: [64, 0],
         translateZ: [0, 0],
-        rotate: window.innerWidth >= 768 ? [-2, 0] : [0, 0]
+        rotate: window.innerWidth >= 768 ? [-2, 0] : [0, 0],
+        complete: event => event.animatables[0].target.removeAttribute('style')
     }, 100)
 
     // Photo: Next
@@ -45,13 +46,31 @@ export const animateIn = scope => {
         translateY: [8, 0],
         translateX: [-48, 0],
         translateZ: [0, 0],
-        rotate: window.innerWidth >= 768 ? [2, 0] : [0, 0]
+        rotate: window.innerWidth >= 768 ? [2, 0] : [0, 0],
+        complete: event => event.animatables[0].target.removeAttribute('style')
     }, 100)
 
     // Reveal on scroll
-    const carouselIn = ScrollOut({
-        once: true,
-        targets: scope,
-        onShown: () => tl.restart()
+    let visible = false
+    requestAnimationFrame(() => {
+        const carouselReveal = ScrollOut({
+            once: true,
+            targets: scope,
+            onChange: (el, ctx) => {
+                if (ctx.visible === 0) {
+                    visible = true
+                }
+            },
+            onShown: (el, ctx) => {
+                // If revealed on scroll, no delay
+                if (visible) {
+                    tl.restart()
+                }
+                // If revealed on load, add a delay
+                else {
+                    setTimeout(() => tl.restart(), animDelay * 2)
+                }
+            }
+        })
     })
 }

src/animations/viewer.js

@@ -7,18 +7,11 @@ import { animDuration, animDelay } from 'utils/store'
 */
 export const animateIn = () => {
     const viewer = document.querySelector('.viewer')
+
     const tl = anime.timeline({
         easing: 'easeOutQuart',
         duration: animDuration,
-        delay: animDelay
-    })
-
-    // Carousel
-    tl.add({
-        targets: viewer.querySelector('.carousel .wrap'),
-        opacity: [0, 1],
-        translateY: ['-4%', 0],
-        translateZ: [0, 0]
+        delay: 1400
     })
 
     // Carousel: Number