import anime from 'animejs'
import { animDuration, animDelay } from 'utils/store'


/*
** Transition In
*/
export const animateIn = () => {
    const viewer = document.querySelector('.viewer')
    const tl = anime.timeline({
        easing: 'easeOutQuart',
        duration: animDuration,
        delay: animDelay
    })

    // Carousel
    tl.add({
        targets: viewer.querySelector('.carousel .wrap'),
        opacity: [0, 1],
        translateY: ['-4%', 0],
        translateZ: [0, 0]
    })

    // Carousel: Number
    tl.add({
        targets: viewer.querySelector('.counter'),
        opacity: [0, 1],
        translateY: [window.innerWidth >= 768 ? -24 : 24, 0]
    }, 0)

    // Dots
    tl.add({
        targets: viewer.querySelectorAll('.carousel__dots'),
        translateY: [16, 0],
        translateZ: [0, 0],
        opacity: [0, 1]
    }, 150)

    // Buttons
    tl.add({
        targets: viewer.querySelectorAll('.tip, .viewer__buttons a'),
        translateY: [-32, 0],
        translateZ: [0, 0],
        opacity: [0, 1],
        delay: anime.stagger(120),
    }, 400)
}