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


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

    // Title: Houses
    tl.add({
        targets: '.place__title_houses',
        translateY: ['150%', 0],
        duration: animDuration
    })
    // Title: Of
    tl.add({
        targets: '.place__title_of',
        opacity: [0, 1],
        duration: 800
    }, 550)
    // Title: Place name
    tl.add({
        targets: '.place__title_name',
        translateY: ['150%', 0],
        duration: animDuration
    }, 200)

    // Switcher link
    tl.add({
        targets: '.place__title .button-control',
        scale: [0.95, 1],
        opacity: [0, 1],
        duration: animDuration
    }, 700)

    // Illustration
    tl.add({
        targets: '.place__illustration',
        scale: [1.075, 1],
        opacity: [0, 1],
        duration: animDuration
    }, 200)

    // Description
    tl.add({
        targets: '.place__description',
        opacity: [0, 1],
        translateY: [24, 0],
        duration: animDuration
    }, 800)

    // Play
    tl.play()
}