72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
import anime from 'animejs'
|
|
import ScrollOut from 'scroll-out'
|
|
import { animDuration, animDurationLong } from '../utils/store'
|
|
import { throttle, parallaxAnime } from '../utils/functions'
|
|
|
|
|
|
/*
|
|
** Transition In
|
|
*/
|
|
export const animateIn = scope => {
|
|
// Title appearing
|
|
const titleReveal = ScrollOut({
|
|
once: true,
|
|
targets: scope,
|
|
onShown (el) {
|
|
// Title reveal
|
|
anime({
|
|
targets: el.querySelectorAll('h2 span'),
|
|
translateY: ['100%', 0],
|
|
duration: 1000,
|
|
delay: anime.stagger(120),
|
|
easing: 'easeOutQuart'
|
|
})
|
|
}
|
|
})
|
|
|
|
// Photo appearing
|
|
const photoReveal = ScrollOut({
|
|
once: true,
|
|
targets: scope.querySelector('picture'),
|
|
onShown (el) {
|
|
// Title reveal
|
|
anime({
|
|
targets: el.querySelector('img'),
|
|
scale: [1.12, 1],
|
|
opacity: [0, 1],
|
|
duration: 2000,
|
|
delay: 50,
|
|
easing: 'easeOutQuart'
|
|
})
|
|
}
|
|
})
|
|
|
|
// Number parallax on scroll
|
|
const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
|
|
const nbParallax = nbParallaxMedia => {
|
|
if (nbParallaxMedia.matches) {
|
|
const scroll = ScrollOut({
|
|
targets: scope.querySelector('.photo_number span'),
|
|
onShown (el) {
|
|
const translate = anime({
|
|
targets: el,
|
|
translateY: (window.innerWidth <= 768) ? ['0%', '20%'] : ['-15%', '15%'],
|
|
duration: 2000,
|
|
easing: 'linear',
|
|
autoplay: false
|
|
})
|
|
window.addEventListener('scroll', () => parallaxAnime(el, translate))
|
|
setTimeout(() => parallaxAnime(el, translate), 50)
|
|
},
|
|
onHidden () {
|
|
window.removeEventListener('scroll', parallaxAnime)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// Listen on screen size to run the function
|
|
nbParallaxMedia.addListener(nbParallax)
|
|
nbParallax(nbParallaxMedia)
|
|
}
|