import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration } from 'utils/store'


/*
** Transition In
*/
export const animateIn = scope => {
    // Card: Active
    const cardActive = ScrollOut({
        once: true,
        targets: scope.querySelector('.gallery__photo--active'),
        onShown (el) {
            anime({
                targets: el,
                top: [32, 0],
                duration: 1200,
                delay: 650,
                easing: 'easeOutQuart'
            })
        }
    })

    // Card: Prev
    const cardPrev = ScrollOut({
        once: true,
        targets: scope.querySelector('.gallery__photo--prev'),
        onShown (el) {
            anime({
                targets: el,
                top: [5, 0],
                left: [-64, 0],
                duration: 1200,
                delay: 690,
                easing: 'easeOutQuart'
            })
        }
    })

    // Card: Prev
    const cardNext = ScrollOut({
        once: true,
        targets: scope.querySelector('.gallery__photo--next'),
        onShown (el) {
            anime({
                targets: el,
                top: [5, 0],
                left: [48, 0],
                duration: 1200,
                delay: 710,
                easing: 'easeOutQuart'
            })
        }
    })
}