Félix Péault
c1bb2f31bc
- Added on title, switcher button and illustration - Not very suitable for photo number
62 lines
1.3 KiB
JavaScript
62 lines
1.3 KiB
JavaScript
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]')
|
|
} |