Félix Péault
be0f4c8b59
will-change is apparently not enough to run GPU-enabled animations, use translateZ on top of it
28 lines
663 B
JavaScript
28 lines
663 B
JavaScript
import anime from 'animejs'
|
|
import ScrollOut from 'scroll-out'
|
|
import { animDelay } from 'utils/store'
|
|
|
|
|
|
/*
|
|
** Transition In
|
|
*/
|
|
export const animateIn = (scope, init) => {
|
|
// Stagger each letters and words
|
|
const letters = anime({
|
|
targets: scope.querySelectorAll('span, em span'),
|
|
translateY: ['100%', 0],
|
|
translateZ: [0, 0],
|
|
easing: 'easeOutQuart',
|
|
duration: 1000,
|
|
delay: anime.stagger(40, { start: init ? 0 : animDelay }),
|
|
autoplay: false
|
|
})
|
|
|
|
// On scroll animation
|
|
const title = ScrollOut({
|
|
once: true,
|
|
targets: scope,
|
|
onShown: () => letters.restart()
|
|
})
|
|
}
|