122 lines
3.3 KiB
JavaScript
122 lines
3.3 KiB
JavaScript
import anime from 'animejs'
|
|
import ScrollOut from 'scroll-out'
|
|
import { animDuration } from '../utils/store'
|
|
import { debounce } from '../utils/functions'
|
|
|
|
|
|
/*
|
|
** Transition In
|
|
*/
|
|
export const animateIn = () => {
|
|
// Title: Houses
|
|
const titleHouses = ScrollOut({
|
|
once: true,
|
|
targets: '#title-houses',
|
|
onShown (el) {
|
|
// Reveal
|
|
anime({
|
|
targets: el.querySelectorAll('span'),
|
|
translateY: ['-70%', 0],
|
|
delay: anime.stagger(80),
|
|
duration: animDuration,
|
|
easing: 'easeOutQuart'
|
|
})
|
|
|
|
// Parallax on scroll
|
|
const translate = anime.timeline({
|
|
autoplay: false,
|
|
duration: animDuration
|
|
})
|
|
translate.add({
|
|
targets: el,
|
|
translateX: ['-3%', '-17%'],
|
|
easing: 'easeOutQuart',
|
|
duration: animDuration
|
|
})
|
|
window.addEventListener('scroll', debounce(event => {
|
|
translate.seek(translate.duration * (window.scrollY / 1000))
|
|
}), 50)
|
|
}
|
|
})
|
|
|
|
// Intro: Description
|
|
const introDescription = ScrollOut({
|
|
once: true,
|
|
targets: '#intro-description',
|
|
onShown (el) {
|
|
anime({
|
|
targets: el.querySelectorAll('p, a'),
|
|
opacity: [0, 1],
|
|
translateY: [8, 0],
|
|
duration: animDuration,
|
|
delay: anime.stagger(200, { start: 400 }),
|
|
easing: 'easeOutQuart'
|
|
})
|
|
}
|
|
})
|
|
|
|
// Intro: Carousel
|
|
const introCarousel = ScrollOut({
|
|
once: true,
|
|
targets: '#intro-carousel',
|
|
onShown(el) {
|
|
anime({
|
|
targets: el,
|
|
opacity: [0, 1],
|
|
translateY: [24, 0],
|
|
duration: animDuration,
|
|
delay: 650,
|
|
easing: 'easeOutQuart'
|
|
})
|
|
}
|
|
})
|
|
|
|
// Title: Of
|
|
const titleOf = ScrollOut({
|
|
once: true,
|
|
targets: '#title-of',
|
|
onShown (el) {
|
|
anime({
|
|
targets: el.querySelectorAll('span'),
|
|
translateY: ['100%', 0],
|
|
delay: anime.stagger(70),
|
|
duration: animDuration,
|
|
easing: 'easeOutQuart'
|
|
})
|
|
}
|
|
})
|
|
|
|
// Title: World
|
|
const titleWorld = ScrollOut({
|
|
once: true,
|
|
targets: '#title-world',
|
|
onShown (el, ctx) {
|
|
anime({
|
|
targets: el.querySelectorAll('span'),
|
|
translateY: ['100%', 0],
|
|
delay: anime.stagger(70),
|
|
duration: animDuration,
|
|
easing: 'easeOutQuart'
|
|
})
|
|
|
|
// Parallax on scroll
|
|
const translate = anime.timeline({
|
|
autoplay: false,
|
|
duration: animDuration
|
|
})
|
|
translate.add({
|
|
targets: el,
|
|
translateX: ['4%', '-4%'],
|
|
easing: 'easeOutQuart',
|
|
duration: animDuration
|
|
})
|
|
|
|
if (ctx.visible) {
|
|
window.addEventListener('scroll', debounce(event => {
|
|
translate.seek(translate.duration * (window.scrollY / 1000))
|
|
}), 35)
|
|
}
|
|
}
|
|
})
|
|
}
|