Jonathan Boyer
6f409c5331
All checks were successful
continuous-integration/drone/push Build is passing
62 lines
1.2 KiB
JavaScript
62 lines
1.2 KiB
JavaScript
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()
|
|
}
|