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

Optimize animations and transitions

Browse Source 
will-change is apparently not enough to run GPU-enabled animations, use translateZ on top of it
This commit is contained in:
Félix Péault
2020-04-09 20:23:24 +02:00
parent 7a44d5b0ed
commit be0f4c8b59
16 changed files with 75 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/animations/Carousel.js
View File

@@ -18,6 +18,7 @@ export const animateIn = scope => {
tl.add({
targets: scope,
translateY: [32, 0],
translateZ: [0, 0],
opacity: [0, 1],
complete: event => event.animatables[0].target.removeAttribute('style')
})
@@ -25,7 +26,8 @@ export const animateIn = scope => {
// Photo: Active
tl.add({
targets: scope.querySelector('.is-active picture'),
translateY: [8, 0]
translateY: [8, 0],
translateZ: [0, 0]
}, 100)
// Photo: Prev
@@ -33,6 +35,7 @@ export const animateIn = scope => {
targets: scope.querySelector('.is-prev picture'),
translateY: [8, 0],
translateX: [64, 0],
translateZ: [0, 0],
rotate: window.innerWidth >= 768 ? [-2, 0] : [0, 0]
}, 100)
@@ -41,6 +44,7 @@ export const animateIn = scope => {
targets: scope.querySelector('.is-next picture'),
translateY: [8, 0],
translateX: [-48, 0],
translateZ: [0, 0],
rotate: window.innerWidth >= 768 ? [2, 0] : [0, 0]
}, 100)

7
src/animations/Locations.js
View File

@@ -24,19 +24,22 @@ export const animateIn = scope => {
targets: location.querySelector('img'),
scale: [1.3, 1],
opacity: [0, 1],
translateZ: [0, 0],
duration: 1800
}, 100)
// Name
tl.add({
targets: location.querySelector('h3'),
translateY: ['100%', 0]
translateY: ['100%', 0],
translateZ: [0, 0],
}, 150)
// Country
tl.add({
targets: location.querySelector('p'),
translateY: ['100%', 0]
translateY: ['100%', 0],
translateZ: [0, 0]
}, 200)
// Scroll reveal

6
src/animations/Photo.js
View File

@@ -18,6 +18,7 @@ export const animateIn = scope => {
tlLocation.add({
targets: scope.querySelectorAll('.photo__location .line span'),
translateY: ['100%', 0],
translateZ: [0, 0],
delay: anime.stagger(120)
}, 200)
// Description
@@ -48,7 +49,8 @@ export const animateIn = scope => {
}, 50)
photoReveal.add({
targets: scope.querySelector('.photo__picture img'),
scale: [1.12, 1]
scale: [1.12, 1],
translateZ: [0, 0]
}, 50)
// Show photo when image is loaded
@@ -67,8 +69,8 @@ export const animateIn = scope => {
const numberPallax = anime({
targets: number.querySelector('span'),
translateY: (window.innerWidth <= 768) ? ['0%', '20%'] : ['-20%', '20%'],
duration: 2000,
easing: 'linear',
duration: 2000,
autoplay: false
})
const numberPallaxAnime = () => parallaxAnime(number, numberPallax)

1
src/animations/TitleSite.js
View File

@@ -11,6 +11,7 @@ export const animateIn = (scope, init) => {
const letters = anime({
targets: scope.querySelectorAll('span, em span'),
translateY: ['100%', 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
duration: 1000,
delay: anime.stagger(40, { start: init ? 0 : animDelay }),

10
src/animations/index.js
View File

@@ -12,15 +12,17 @@ export const animateIn = () => {
const titleHouses = anime({
targets: document.querySelectorAll('#title-houses span'),
translateY: ['-70%', 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
delay: anime.stagger(80, { start: animDelay }),
duration: animDuration,
easing: 'easeOutQuart'
duration: animDuration
})
// Parallax on scroll
const translate = anime({
targets: '#title-houses',
translateX: ['7%', '-15%'],
translateZ: [0, 0],
easing: 'linear',
duration: animDuration,
autoplay: false
@@ -33,6 +35,7 @@ export const animateIn = () => {
targets: document.getElementById('intro-description').querySelectorAll('p, a'),
opacity: [0, 1],
translateY: [8, 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
duration: animDuration,
delay: anime.stagger(200, { start: animDelay + 200 })
@@ -43,6 +46,7 @@ export const animateIn = () => {
const titleOfReveal = anime({
targets: titleOf.querySelectorAll('span'),
translateY: ['100%', 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
delay: anime.stagger(70),
duration: animDuration,
@@ -59,6 +63,7 @@ export const animateIn = () => {
const titleWorldReveal = anime({
targets: titleWorld.querySelectorAll('span'),
translateY: ['100%', 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
delay: anime.stagger(70),
duration: animDuration,
@@ -67,6 +72,7 @@ export const animateIn = () => {
const titleWorldParallax = anime({
targets: titleWorld,
translateX: ['5%', '-3%'],
translateZ: [0, 0],
easing: 'linear',
duration: animDuration,
autoplay: false

15
src/animations/page.js
View File

@@ -8,13 +8,24 @@ import { animDuration, animDelay } from 'utils/store'
export const animateIn = () => {
const tl = anime.timeline({
easing: 'easeOutQuart',
duration: animDuration
duration: animDuration,
delay: animDelay
})
// Simple slide and fade on each part of the page
tl.add({
targets: document.querySelectorAll('.page__part'),
opacity: [0, 1],
translateY: [8, 0],
delay: anime.stagger(160, { start: animDelay })
translateZ: [0, 0],
delay: anime.stagger(160)
})
// Globe
tl.add({
targets: document.querySelector('.globe'),
opacity: [0, 1],
translateY: ['5%', 0],
translateZ: [0, 0]
}, 200)
}

9
src/animations/place.js
View File

@@ -15,7 +15,8 @@ export const animateIn = () => {
// Title: Houses
tl.add({
targets: '.place__title_houses',
translateY: ['150%', 0]
translateY: ['150%', 0],
translateZ: [0, 0]
})
// Title: Of
tl.add({
@@ -25,7 +26,8 @@ export const animateIn = () => {
// Title: Place name
tl.add({
targets: '.place__title_name',
translateY: ['150%', 0]
translateY: ['150%', 0],
translateZ: [0, 0]
}, 150)
// Switcher link
@@ -46,6 +48,7 @@ export const animateIn = () => {
tl.add({
targets: '.place__description',
opacity: [0, 1],
translateY: [24, 0]
translateY: [24, 0],
translateZ: [0, 0]
}, 450)
}

6
src/animations/viewer.js
View File

@@ -17,7 +17,8 @@ export const animateIn = () => {
tl.add({
targets: viewer.querySelector('.carousel .wrap'),
opacity: [0, 1],
translateY: ['-4%', 0]
translateY: ['-4%', 0],
translateZ: [0, 0]
})
// Carousel: Number
@@ -31,6 +32,7 @@ export const animateIn = () => {
tl.add({
targets: viewer.querySelectorAll('.carousel__dots'),
translateY: [16, 0],
translateZ: [0, 0],
opacity: [0, 1]
}, 150)
@@ -38,8 +40,8 @@ export const animateIn = () => {
tl.add({
targets: viewer.querySelectorAll('.tip, .viewer__buttons a'),
translateY: [-32, 0],
translateZ: [0, 0],
opacity: [0, 1],
delay: anime.stagger(120),
}, 400)
}