32 lines
855 B
JavaScript
32 lines
855 B
JavaScript
import anime from 'animejs'
|
|
import ScrollOut from 'scroll-out'
|
|
import { firstLoad, animDurationLong, animDelay } from 'utils/store'
|
|
|
|
let firstLoadValue
|
|
firstLoad.subscribe(store => firstLoadValue = 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 : (firstLoadValue) ? animDurationLong : animDelay }),
|
|
autoplay: false
|
|
})
|
|
|
|
// On scroll animation
|
|
const title = ScrollOut({
|
|
once: true,
|
|
targets: scope,
|
|
onShown: () => {
|
|
requestAnimationFrame(() => letters.restart())
|
|
}
|
|
})
|
|
}
|