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


/*
** Transition In
*/
export const animateIn = () => {
    const tl = anime.timeline({
        duration: animDuration,
        delay: animDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
        easing: 'easeOutQuart'
    })

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

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

    // Illustration
    tl.add({
        targets: '.place__illustration',
        scale: [1.05, 1],
        translateZ: [0, 0],
        opacity: [0, 1]
    }, 0)

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


    /*
    ** Parallax
    */
    const rellax = new Rellax('[data-rellax-speed]')
}