Carousel: Fix reveal animation

src/animations/Carousel.js

@@ -10,9 +10,18 @@ export const animateIn = scope => {
     const tl = anime.timeline({
         easing: 'easeOutQuart',
         duration: animDuration,
+        delay: animDelay,
         autoplay: false
     })
 
+    // Carousel
+    tl.add({
+        targets: scope,
+        translateY: [32, 0],
+        opacity: [0, 1],
+        complete: event => event.animatables[0].target.removeAttribute('style')
+    })
+
     // Photo: Active
     tl.add({
         targets: scope.querySelector('.is-active picture'),
@@ -24,7 +33,7 @@ export const animateIn = scope => {
         targets: scope.querySelector('.is-prev picture'),
         translateY: [8, 0],
         translateX: [64, 0],
-        rotate: [-2, 0]
+        rotate: window.innerWidth >= 768 ? [-2, 0] : [0, 0]
     }, 100)
 
     // Photo: Next
@@ -32,7 +41,7 @@ export const animateIn = scope => {
         targets: scope.querySelector('.is-next picture'),
         translateY: [8, 0],
         translateX: [-48, 0],
-        rotate: [2, 0]
+        rotate: window.innerWidth >= 768 ? [2, 0] : [0, 0]
     }, 100)
 
     // Reveal on scroll

src/animations/index.js

@@ -17,17 +17,6 @@ export const animateIn = () => {
         easing: 'easeOutQuart'
     })
 
-    // Carousel
-    const carousel = anime({
-        targets: document.querySelector('.intro .carousel'),
-        translateY: [32, 0],
-        opacity: [0, 1],
-        easing: 'easeOutQuart',
-        duration: animDuration,
-        delay: animDelay,
-        complete: event => event.animatables[0].target.removeAttribute('style')
-    })
-
     // Parallax on scroll
     const translate = anime({
         targets: '#title-houses',