Félix Péault
be0f4c8b59
will-change is apparently not enough to run GPU-enabled animations, use translateZ on top of it
48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
import anime from 'animejs'
|
|
import { animDuration, animDelay } from 'utils/store'
|
|
|
|
|
|
/*
|
|
** Transition In
|
|
*/
|
|
export const animateIn = () => {
|
|
const viewer = document.querySelector('.viewer')
|
|
const tl = anime.timeline({
|
|
easing: 'easeOutQuart',
|
|
duration: animDuration,
|
|
delay: animDelay
|
|
})
|
|
|
|
// Carousel
|
|
tl.add({
|
|
targets: viewer.querySelector('.carousel .wrap'),
|
|
opacity: [0, 1],
|
|
translateY: ['-4%', 0],
|
|
translateZ: [0, 0]
|
|
})
|
|
|
|
// Carousel: Number
|
|
tl.add({
|
|
targets: viewer.querySelector('.counter'),
|
|
opacity: [0, 1],
|
|
translateY: [window.innerWidth >= 768 ? -24 : 24, 0]
|
|
}, 0)
|
|
|
|
// Dots
|
|
tl.add({
|
|
targets: viewer.querySelectorAll('.carousel__dots'),
|
|
translateY: [16, 0],
|
|
translateZ: [0, 0],
|
|
opacity: [0, 1]
|
|
}, 150)
|
|
|
|
// Buttons
|
|
tl.add({
|
|
targets: viewer.querySelectorAll('.tip, .viewer__buttons a'),
|
|
translateY: [-32, 0],
|
|
translateZ: [0, 0],
|
|
opacity: [0, 1],
|
|
delay: anime.stagger(120),
|
|
}, 400)
|
|
}
|