flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP attempt to fix page transitions, Several edits
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-04-02 16:07:16 +02:00
parent 6f409c5331
commit 730eb75457
34 changed files with 386 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/animations/index.js
View File

@@ -1,6 +1,6 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration } from 'utils/store'
import { transitionNormal, transitionLong, transitionDelay } from 'utils/store'
import { throttle, parallaxAnime } from 'utils/functions'
@@ -9,67 +9,65 @@ import { throttle, parallaxAnime } from 'utils/functions'
*/
export const animateIn = () => {
// Title: Houses
const titleHouses = ScrollOut({
once: true,
targets: '#title-houses',
onShown (el) {
// const titleHouses = ScrollOut({
// once: true,
// targets: '#title-houses',
// onShown (el) {
// Reveal each letter
anime({
targets: el.querySelectorAll('span'),
translateY: ['-70%', 0],
delay: anime.stagger(80),
duration: animDuration,
easing: 'easeOutQuart'
})
// Parallax on scroll
const translate = anime({
targets: el,
translateX: ['7%', '-15%'],
easing: 'linear',
autoplay: false,
duration: animDuration
})
window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
setTimeout(() => parallaxAnime(el, translate), 50)
},
onHidden () {
window.removeEventListener('scroll', parallaxAnime)
}
anime({
targets: document.querySelectorAll('#title-houses span'),
translateY: ['-70%', 0],
delay: anime.stagger(80, { start: transitionDelay }),
duration: transitionNormal,
easing: 'easeOutQuart'
})
// Parallax on scroll
const translate = anime({
targets: '#title-houses',
translateX: ['7%', '-15%'],
easing: 'linear',
autoplay: false,
duration: transitionNormal
})
window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 10))
setTimeout(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
// },
// onHidden: () => window.removeEventListener('scroll', parallaxAnime)
// })
// 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'
})
}
// const introDescription = ScrollOut({
// once: true,
// targets: '#intro-description',
// onShown (el) {
anime({
targets: '#intro-description p, #intro-description a',
opacity: [0, 1],
translateY: [8, 0],
easing: 'easeOutQuart',
duration: transitionNormal,
delay: anime.stagger(200, { start: transitionDelay + 400 })
})
// }
// })
// Intro: Carousel
const introCarousel = ScrollOut({
once: true,
// const introCarousel = ScrollOut({
// once: true,
// targets: '#intro-carousel',
// onShown (el) {
anime({
targets: '#intro-carousel',
onShown (el) {
anime({
targets: el,
opacity: [0, 1],
translateY: [24, 0],
duration: animDuration,
delay: 650,
easing: 'easeOutQuart',
complete: () => el.removeAttribute('style')
})
}
opacity: [0, 1],
translateY: [24, 0],
easing: 'easeOutQuart',
duration: transitionNormal,
delay: transitionDelay + 600,
complete: event => event.animatables[0].target.removeAttribute('style')
})
// }
// })
// Title: Of
const titleOf = ScrollOut({
@@ -79,9 +77,9 @@ export const animateIn = () => {
anime({
targets: el.querySelectorAll('span'),
translateY: ['100%', 0],
easing: 'easeOutQuart',
delay: anime.stagger(70),
duration: animDuration,
easing: 'easeOutQuart'
duration: transitionNormal
})
}
})
@@ -94,9 +92,9 @@ export const animateIn = () => {
anime({
targets: el.querySelectorAll('span'),
translateY: ['100%', 0],
easing: 'easeOutQuart',
delay: anime.stagger(70),
duration: animDuration,
easing: 'easeOutQuart'
duration: transitionNormal
})
// Parallax on scroll
@@ -105,14 +103,27 @@ export const animateIn = () => {
translateX: ['5%', '-3%'],
easing: 'linear',
autoplay: false,
duration: animDuration
duration: transitionNormal
})
window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
setTimeout(() => parallaxAnime(el, translate), 50)
},
onHidden() {
window.removeEventListener('scroll', parallaxAnime)
}
onHidden: () => window.removeEventListener('scroll', parallaxAnime)
})
}
/*
** Transition Out
*/
export const animateOut = () => {
anime({
targets: document.querySelector('#title-houses'),
translateY: ['-70%', 0],
opacity: [1, 0],
duration: transitionNormal,
easing: 'easeOutQuart'
})
}