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
    })
}