76 lines
2.4 KiB
JavaScript
76 lines
2.4 KiB
JavaScript
import anime from 'animejs'
|
|
import ScrollOut from 'scroll-out'
|
|
import imagesLoaded from 'imagesloaded'
|
|
import { throttle, parallaxAnime } from 'utils/functions'
|
|
|
|
|
|
/*
|
|
** Transition In
|
|
*/
|
|
export const animateIn = scope => {
|
|
// Title (reveal on scroll)
|
|
const titleReveal = ScrollOut({
|
|
once: true,
|
|
targets: scope.querySelector('h2'),
|
|
onShown (el) {
|
|
// Title reveal
|
|
anime({
|
|
targets: el.querySelectorAll('span'),
|
|
translateY: ['100%', 0],
|
|
easing: 'easeOutQuart',
|
|
duration: 1000,
|
|
delay: anime.stagger(120)
|
|
})
|
|
}
|
|
})
|
|
|
|
// Photo (reveal on scroll)
|
|
imagesLoaded(scope.querySelector('.photo__image'), instance => {
|
|
const image = instance.elements[0]
|
|
const photoReveal = ScrollOut({
|
|
once: true,
|
|
targets: image,
|
|
onShown (el) {
|
|
// Load the photo then reveal it
|
|
anime({
|
|
targets: el.querySelector('img'),
|
|
scale: [1.12, 1],
|
|
opacity: [0, 1],
|
|
easing: 'easeOutQuart',
|
|
duration: 2000,
|
|
delay: 50
|
|
})
|
|
}
|
|
})
|
|
})
|
|
|
|
// Number parallax on scroll
|
|
const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
|
|
const nbParallax = matchMedia => {
|
|
if (matchMedia.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', throttle(() => parallaxAnime(el, translate), 50))
|
|
setTimeout(() => parallaxAnime(el, translate), 50)
|
|
console.log('show')
|
|
},
|
|
onHidden () {
|
|
if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// Listen on screen size to run the function
|
|
nbParallaxMedia.addListener(nbParallax)
|
|
nbParallax(nbParallaxMedia)
|
|
}
|