diff --git a/src/animations/Carousel.js b/src/animations/Carousel.js index 1de8ac9..2b0823b 100644 --- a/src/animations/Carousel.js +++ b/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 diff --git a/src/animations/index.js b/src/animations/index.js index dff9e26..8ad292e 100644 --- a/src/animations/index.js +++ b/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',