Félix Péault
bd9b91f480
All checks were successful
continuous-integration/drone/push Build is passing
- Basically add `will-change` to CSS elements to enable GPU animations, less choppy, more sassy - Use requestAnimationFrame over setTimeout - Avoid repaints AMAP
21 lines
486 B
JavaScript
21 lines
486 B
JavaScript
import anime from 'animejs'
|
|
import { animDuration, animDelay } from 'utils/store'
|
|
|
|
|
|
/*
|
|
** Transition In
|
|
*/
|
|
export const animateIn = () => {
|
|
const tl = anime.timeline({
|
|
easing: 'easeOutQuart',
|
|
duration: animDuration
|
|
})
|
|
// Simple slide and fade on each part of the page
|
|
tl.add({
|
|
targets: document.querySelectorAll('.page__part'),
|
|
opacity: [0, 1],
|
|
translateY: [8, 0],
|
|
delay: anime.stagger(160, { start: animDelay })
|
|
})
|
|
}
|