diff --git a/src/animations/Locations.js b/src/animations/Locations.js index 02e46f0..6823f3c 100644 --- a/src/animations/Locations.js +++ b/src/animations/Locations.js @@ -2,42 +2,53 @@ import anime from 'animejs' import ScrollOut from 'scroll-out' import { animDurationLong } from 'utils/store' +// Variables +let delay = 0 + /* ** Transition In */ export const animateIn = scope => { // Each location (reveal on scroll) - const locations = ScrollOut({ - targets: scope.querySelectorAll('.location'), - onShown: el => { - // Image - anime({ - targets: el.querySelector('img'), - scale: [1.3, 1], - opacity: [0, 1], - easing: 'easeOutQuart', - duration: 1800, - delay: 100 - }) + scope.querySelectorAll('.location').forEach(location => { + console.log(delay) - // Name - anime({ - targets: el.querySelector('h3'), - translateY: ['100%', 0], - easing: 'easeOutQuart', - duration: 600, - delay: 300 - }) + const tl = anime.timeline({ + easing: 'easeOutQuart', + duration: 600, + autoplay: false, + delay + }) - // Country - anime({ - targets: el.querySelector('p'), - translateY: ['100%', 0], - easing: 'easeOutQuart', - duration: 600, - delay: 550 - }) - } + // Image + tl.add({ + targets: location.querySelector('img'), + scale: [1.3, 1], + opacity: [0, 1], + duration: 1800 + }, 100) + + // Name + tl.add({ + targets: location.querySelector('h3'), + translateY: ['100%', 0] + }, 150) + + // Country + tl.add({ + targets: location.querySelector('p'), + translateY: ['100%', 0] + }, 200) + + // Scroll reveal + ScrollOut({ + once: true, + targets: location, + onShown: () => tl.restart() + }) + + // Increase delay between locations + delay += 80 }) }