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

69
src/animations/Carousel.js
View File

@@ -1,56 +1,39 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
// import { animDuration } from 'utils/store'
import { transitionNormal, transitionDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = scope => {
// Card: Active
const cardActive = ScrollOut({
once: true,
targets: scope.querySelector('.gallery__photo--active'),
onShown (el) {
anime({
targets: el,
top: [32, 0],
duration: 1200,
delay: 650,
easing: 'easeOutQuart'
})
}
// Timeline
const tl = anime.timeline({
easing: 'easeOutQuart',
duration: transitionNormal,
delay: transitionDelay
})
// Photo: Active
tl.add({
targets: scope.querySelector('.is-active picture'),
translateY: [32, 0]
}, 400)
// Photo: Prev
tl.add({
targets: scope.querySelector('.is-prev picture'),
translateY: [8, 0],
translateX: [64, 0]
}, 550)
// Photo: Next
tl.add({
targets: scope.querySelector('.is-next picture'),
translateY: [8, 0],
translateX: [-48, 0]
}, 550)
// Card: Prev
const cardPrev = ScrollOut({
const carouselIn = ScrollOut({
once: true,
targets: scope.querySelector('.gallery__photo--prev'),
onShown (el) {
anime({
targets: el,
top: [5, 0],
left: [-64, 0],
duration: 1200,
delay: 690,
easing: 'easeOutQuart'
})
}
})
// Card: Prev
const cardNext = ScrollOut({
once: true,
targets: scope.querySelector('.gallery__photo--next'),
onShown (el) {
anime({
targets: el,
top: [5, 0],
left: [48, 0],
duration: 1200,
delay: 710,
easing: 'easeOutQuart'
})
}
targets: scope,
onShown: () => tl.restart()
})
}

2
src/animations/Locations.js
View File

@@ -1,6 +1,6 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration } from 'utils/store'
import { transitionLong } from 'utils/store'
/*

12
src/animations/TitleSite.js
View File

@@ -1,12 +1,12 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration } from 'utils/store'
import { transitionDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = scope => {
export const animateIn = (scope, init) => {
// On scroll animation
const title = ScrollOut({
once: true,
@@ -16,16 +16,16 @@ export const animateIn = scope => {
anime({
targets: el.querySelectorAll('span'),
translateY: ['100%', 0],
delay: anime.stagger(40),
duration: 1000,
easing: 'easeOutQuart'
easing: 'easeOutQuart',
delay: anime.stagger(40, { start: init ? 0 : transitionDelay }),
duration: 1000
})
// Word in between
anime({
targets: el.querySelectorAll('em span'),
opacity: [0, 1],
delay: anime.stagger(80, { start: 400 }),
delay: anime.stagger(80, { start: (init ? 0 : transitionDelay) + 400 }),
duration: 1000,
easing: 'easeOutQuart'
})

65
src/animations/Transition.js
View File

@@ -1,32 +1,34 @@
import anime from 'animejs'
import { animDuration, animDurationLong } from 'utils/store'
import { transitionNormal, transitionLong, transitionPanelIn } from 'utils/store'
/*
** Transition In
*/
export const animateIn = scope => {
// Panel itself
const transition = anime({
targets: scope.querySelector('.transition__background'),
scaleY: [1, 1],
opacity: [0, 1],
duration: 400,
const tl = anime.timeline({
duration: transitionPanelIn,
easing: 'easeInOutQuart',
begin () {
begin: () => {
// Show the panel
scope.classList.remove('hidden')
}
})
// Panel itself
tl.add({
targets: scope.querySelector('.transition__background'),
scaleY: [1, 1],
opacity: [0, 1],
duration: transitionPanelIn
}, 0)
// Globe icon
const globe = anime({
tl.add({
targets: scope.querySelector('svg'),
opacity: [0, 1],
translateY: ['16px', 0],
duration: 400,
easing: 'easeInOutQuart'
})
translateY: ['3vh', 0],
duration: transitionPanelIn
}, 0)
}
@@ -34,14 +36,9 @@ export const animateIn = scope => {
** Transition Out
*/
export const animateOut = (scope, callback) => {
// Background
const background = anime({
targets: scope.querySelector('.transition__background'),
scaleY: [1, 0],
duration: animDurationLong,
delay: 800,
const tl = anime.timeline({
easing: 'easeInOutQuart',
complete () {
complete: () => {
// Hide the panel
scope.classList.add('hidden')
@@ -50,23 +47,29 @@ export const animateOut = (scope, callback) => {
}
})
// Background
tl.add({
targets: scope.querySelector('.transition__background'),
scaleY: [1, 0],
duration: transitionLong
}, 600)
// Title
const title = anime({
tl.add({
targets: scope.querySelector('.title-location'),
opacity: [1, 0],
translateY: [0, '-50vh'],
duration: animDuration,
delay: 1000,
easing: 'easeInOutQuart'
})
duration: transitionNormal
}, 850)
// Globe icon
const globe = anime({
tl.add({
targets: scope.querySelector('svg'),
opacity: [1, 0],
translateY: [0, '-50vh'],
duration: animDuration,
delay: 1000,
easing: 'easeInOutQuart'
})
duration: transitionNormal
}, 850)
// Play
tl.play()
}

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'
})
}

30
src/animations/page.js
View File

@@ -1,25 +1,25 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration, animDurationLong } from 'utils/store'
import { transitionNormal, transitionDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = () => {
// Simple fade
const page = ScrollOut({
once: true,
targets: '.page',
onShown (el) {
anime({
targets: '.page__part',
opacity: [0, 1],
translateY: [8, 0],
duration: 1800,
delay: anime.stagger(220, { start: animDurationLong * 0.3 }),
easing: 'easeOutQuart'
})
}
// Simple slide and fade on each part of the page
// const page = ScrollOut({
// once: true,
// targets: '.page',
// onShown (el) {
anime({
targets: document.querySelectorAll('.page__part'),
opacity: [0, 1],
translateY: [8, 0],
easing: 'easeOutQuart',
duration: transitionNormal,
delay: anime.stagger(220, { start: transitionDelay }),
})
// }
// })
}

24
src/animations/place.js
View File

@@ -1,6 +1,6 @@
import anime from 'animejs'
// import ScrollOut from 'scroll-out'
import { animDuration } from 'utils/store'
import { transitionNormal, transitionDelay } from 'utils/store'
/*
@@ -9,7 +9,7 @@ import { animDuration } from 'utils/store'
export const animateIn = () => {
const tl = anime.timeline({
duration: 1800,
delay: 1800,
delay: transitionDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
easing: 'easeOutQuart'
})
@@ -17,27 +17,27 @@ export const animateIn = () => {
tl.add({
targets: '.place__title_houses',
translateY: ['150%', 0],
duration: animDuration
})
duration: transitionNormal
}, 200)
// Title: Of
tl.add({
targets: '.place__title_of',
opacity: [0, 1],
duration: 800
}, 550)
duration: transitionNormal
}, 800)
// Title: Place name
tl.add({
targets: '.place__title_name',
translateY: ['150%', 0],
duration: animDuration
}, 200)
duration: transitionNormal
}, 350)
// Switcher link
tl.add({
targets: '.place__title .button-control',
scale: [0.95, 1],
opacity: [0, 1],
duration: animDuration
duration: transitionNormal
}, 700)
// Illustration
@@ -45,7 +45,7 @@ export const animateIn = () => {
targets: '.place__illustration',
scale: [1.075, 1],
opacity: [0, 1],
duration: animDuration
duration: transitionNormal
}, 200)
// Description
@@ -53,8 +53,8 @@ export const animateIn = () => {
targets: '.place__description',
opacity: [0, 1],
translateY: [24, 0],
duration: animDuration
}, 800)
duration: transitionNormal
}, 650)
// Play
tl.play()

8
src/animations/viewer.js
View File

@@ -1,5 +1,5 @@
import anime from 'animejs'
import { animDuration } from 'utils/store'
import { transitionNormal } from 'utils/store'
/*
@@ -10,7 +10,7 @@ export const animateIn = () => {
anime({
targets: '.viewer__top p, .viewer__top .buttons a',
translateY: [-32, 0],
duration: animDuration,
duration: transitionNormal,
delay: anime.stagger(150, { start: 600 }),
easing: 'easeOutQuart'
})
@@ -20,7 +20,7 @@ export const animateIn = () => {
targets: '.viewer .carousel',
opacity: [0, 1],
translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%'],
duration: animDuration,
duration: transitionNormal,
delay: 300,
easing: 'easeOutQuart'
})
@@ -30,7 +30,7 @@ export const animateIn = () => {
targets: '.viewer .carousel__number_column',
opacity: [0, 1],
marginTop: [24, 0],
duration: animDuration,
duration: transitionNormal,
delay: anime.stagger(100, { start: 450 }),
easing: 'easeOutQuart'
})