diff --git a/src/animations/Locations.js b/src/animations/Locations.js index cf2182a..3e70f10 100644 --- a/src/animations/Locations.js +++ b/src/animations/Locations.js @@ -7,40 +7,37 @@ import { animDurationLong } from 'utils/store' ** Transition In */ export const animateIn = scope => { - const tl = anime.timeline({ - autoplay: false, - duration: 600, - delay: anime.stagger(200), - easing: 'easeOutQuart' - }) - - // Image - tl.add({ - targets: scope.querySelector('img'), - scale: [1.3, 1], - opacity: [0, 1], - duration: 1800, - delay: 100 - }) - - // Name - tl.add({ - targets: scope.querySelector('h3'), - translateY: ['100%', 0] - }, 300) - - // Country - tl.add({ - targets: scope.querySelector('p'), - translateY: ['100%', 0] - }, 550) - - // Each location (reveal on scroll) const locations = ScrollOut({ targets: scope.querySelectorAll('.location'), onShown (el) { - tl.restart() + const tl = anime.timeline({ + autoplay: false, + duration: 600, + delay: anime.stagger(200), + easing: 'easeOutQuart' + }) + + // Image + tl.add({ + targets: scope.querySelector('img'), + scale: [1.3, 1], + opacity: [0, 1], + duration: 1800, + delay: 100 + }) + + // Name + tl.add({ + targets: scope.querySelector('h3'), + translateY: ['100%', 0] + }, 300) + + // Country + tl.add({ + targets: scope.querySelector('p'), + translateY: ['100%', 0] + }, 550) } }) }