diff --git a/src/animations/Locations.js b/src/animations/Locations.js index 7a9a214..ebbbd2b 100644 --- a/src/animations/Locations.js +++ b/src/animations/Locations.js @@ -2,21 +2,24 @@ import anime from 'animejs' import ScrollOut from 'scroll-out' import { animDurationLong } from 'utils/store' -// Variables -let delay = 0 - /* ** Transition In */ export const animateIn = scope => { + let delay = 0 + // Each location (reveal on scroll) scope.querySelectorAll('.location').forEach(location => { const tl = anime.timeline({ easing: 'easeOutQuart', duration: 600, autoplay: false, - delay + delay, + complete: () => { + // Reset delay + delay = 0 + } }) // Image @@ -42,14 +45,14 @@ export const animateIn = scope => { translateZ: [0, 0] }, 200) + // Increase delay between locations + delay += 65 + // Scroll reveal ScrollOut({ once: true, targets: location, onShown: () => tl.restart() }) - - // Increase delay between locations - delay += 65 }) }