Félix Péault
f414457172
All checks were successful
continuous-integration/drone/push Build is passing
96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
import anime from 'animejs'
|
|
import ScrollOut from 'scroll-out'
|
|
import { animDuration, animDelay } from 'utils/store'
|
|
import { throttle, parallaxAnime } from 'utils/functions'
|
|
|
|
|
|
/*
|
|
** Transition In
|
|
*/
|
|
export const animateIn = () => {
|
|
// Title: Houses
|
|
const titleHouses = anime({
|
|
targets: document.querySelectorAll('#title-houses span'),
|
|
translateY: ['-70%', 0],
|
|
delay: anime.stagger(80, { start: animDelay }),
|
|
duration: animDuration,
|
|
easing: 'easeOutQuart'
|
|
})
|
|
|
|
// Carousel
|
|
const carousel = anime({
|
|
targets: document.querySelector('.intro .carousel'),
|
|
translateY: [32, 0],
|
|
opacity: [0, 1],
|
|
easing: 'easeOutQuart',
|
|
duration: animDuration,
|
|
delay: animDelay,
|
|
complete: event => event.animatables[0].target.removeAttribute('style')
|
|
})
|
|
|
|
// Parallax on scroll
|
|
const translate = anime({
|
|
targets: '#title-houses',
|
|
translateX: ['7%', '-15%'],
|
|
easing: 'linear',
|
|
duration: animDuration,
|
|
autoplay: false
|
|
})
|
|
window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 5))
|
|
requestAnimationFrame(() => parallaxAnime(document.getElementById('title-houses'), translate))
|
|
|
|
// Intro: Description
|
|
const introDescription = anime({
|
|
targets: document.getElementById('intro-description').querySelectorAll('p, a'),
|
|
opacity: [0, 1],
|
|
translateY: [8, 0],
|
|
easing: 'easeOutQuart',
|
|
duration: animDuration,
|
|
delay: anime.stagger(200, { start: animDelay + 200 })
|
|
})
|
|
|
|
// Title: Of (reveal on scroll)
|
|
const titleOf = ScrollOut({
|
|
once: true,
|
|
targets: '#title-of',
|
|
onShown: el => {
|
|
anime({
|
|
targets: el.querySelectorAll('span'),
|
|
translateY: ['100%', 0],
|
|
easing: 'easeOutQuart',
|
|
delay: anime.stagger(70),
|
|
duration: animDuration
|
|
})
|
|
}
|
|
})
|
|
|
|
// Title: World (reveal on scroll)
|
|
const titleWorld = document.getElementById('title-world')
|
|
const titleWorldTranslate = anime({
|
|
targets: document.getElementById('title-world'),
|
|
translateX: ['5%', '-3%'],
|
|
easing: 'linear',
|
|
autoplay: false,
|
|
duration: animDuration
|
|
})
|
|
const titleWorldAnime = parallaxAnime(titleWorld, titleWorldTranslate)
|
|
const titleWorldScroll = ScrollOut({
|
|
once: true,
|
|
targets: titleWorld,
|
|
onShown: () => {
|
|
const titleWorldLetters = anime({
|
|
targets: el.querySelectorAll('span'),
|
|
translateY: ['100%', 0],
|
|
easing: 'easeOutQuart',
|
|
delay: anime.stagger(70),
|
|
duration: animDuration
|
|
})
|
|
window.addEventListener('scroll', throttle(() => titleWorldAnime, 10))
|
|
requestAnimationFrame(() => titleWorldAnime)
|
|
},
|
|
onHidden: () => {
|
|
if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
|
|
}
|
|
})
|
|
}
|