import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { firstLoad, animDurationLong, animDelay } from 'utils/store'

let firstLoadValue
firstLoad.subscribe(store => firstLoadValue = store)

/*
** Transition In
*/
export const animateIn = (scope, init) => {
    // Stagger each letters and words
    const letters = anime({
        targets: scope.querySelectorAll('span, em span'),
        translateY: ['100%', 0],
        translateZ: [0, 0],
        easing: 'easeOutQuart',
        duration: 1000,
        delay: anime.stagger(40, { start: init ? 0 : (firstLoadValue) ? animDurationLong : animDelay }),
        autoplay: false
    })

    // On scroll animation
    const title = ScrollOut({
        once: true,
        targets: scope,
        onShown: () => {
            requestAnimationFrame(() => letters.restart())
        }
    })
}