55 lines
1.1 KiB
JavaScript
55 lines
1.1 KiB
JavaScript
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)
|
|
scope.querySelectorAll('.location').forEach(location => {
|
|
console.log(delay)
|
|
|
|
const tl = anime.timeline({
|
|
easing: 'easeOutQuart',
|
|
duration: 600,
|
|
autoplay: false,
|
|
delay
|
|
})
|
|
|
|
// 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
|
|
})
|
|
}
|