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

2
package.json
View File

@@ -16,7 +16,7 @@
"serve": "node server/server.js"
},
"dependencies": {
"animejs": "^3.1.0",
"animejs": "^3.2.0",
"compression": "^1.7.4",
"imagesloaded": "^4.1.4",
"lazysizes": "^5.2.0",

8
pnpm-lock.yaml generated
View File

@@ -1,5 +1,5 @@
dependencies:
animejs: 3.1.0
animejs: 3.2.0
compression: 1.7.4
imagesloaded: 4.1.4
lazysizes: 5.2.0
@@ -1043,10 +1043,10 @@ packages:
node: '>=0.4.2'
resolution:
integrity: sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
/animejs/3.1.0:
/animejs/3.2.0:
dev: false
resolution:
integrity: sha512-BjnCroPPQPEAngT0M89pz9TBcOGgOFLnVoq3+jV2upl4rn60k57/AXvESTnuILsNgOEjGuhMEOMp7IlQzk40kA==
integrity: sha512-zhtGl5cS0G2f5DfciMO8uwWpnx06nfFnHlXYYXHBazHep1Lyd6kEtBQP+9hpYKE0dBZjIigHp9VpMO95ZfXQJQ==
/ansi-escapes/4.3.1:
dependencies:
type-fest: 0.11.0
@@ -4872,7 +4872,7 @@ specifiers:
'@rollup/plugin-commonjs': ^11.0.2
'@rollup/plugin-node-resolve': ^7.1.1
'@rollup/plugin-replace': ^2.3.1
animejs: ^3.1.0
animejs: ^3.2.0
autoprefixer: ^9.7.6
babel-plugin-module-resolver: ^4.0.0
compression: ^1.7.4

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

2
src/atoms/Counter.svelte
View File

@@ -38,7 +38,7 @@
<div class="counter {className}" bind:this={counter}>
{#each digits as digit}
<div class="counter__column" style="transform: translateY(-{digit}0%);">
<div class="counter__column" style="transform: translateY(-{digit}0%) translateZ(0);">
{#each numbers as number}
<span>{number}</span>
{/each}

2
src/organisms/Pagination.svelte
View File

@@ -45,7 +45,7 @@
>
<div class="pagination__info">page</div>
<div class="pagination__numbers">
<div class="scroll" style="transform: translateY(-{pageTranslate}%);">
<div class="scroll" style="transform: translateY(-{pageTranslate}%) translateZ(0);">
{#each pagesArray as page}
<span>{page}</span>
{/each}

2
src/style/molecules/_location.scss
View File

@@ -65,7 +65,7 @@
&:after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
transform: scale(1) translate(-50%, -50%);
}
}

30
src/style/organisms/_carousel.scss
View File

@@ -63,7 +63,8 @@
left: 0;
width: 100%;
height: 100%;
transform: scale($scale);
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transform: scale($scale) translateZ(0);
transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
pointer-events: none;
@extend %willchange;
@@ -72,7 +73,7 @@
&.is-active {
opacity: 1;
z-index: 10;
transform: scale(1);
transform: scale(1) translateZ(0);
pointer-events: auto;
img {
@@ -99,32 +100,32 @@
// Previous photo
&.is-prev {
z-index: 9;
transform: translate(-40%, 0) scale(0.85);
transform: translate(-40%, 0) scale(0.85) translateZ(0);
@include breakpoint (sm) {
z-index: 8;
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale) translateZ(0);
}
// Hover
&.hover {
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale) translateZ(0);
}
}
// Next photo
&.is-next {
z-index: 8;
transform: translate(40%, 0) scale(0.85);
transform: translate(40%, 0) scale(0.85) translateZ(0);
@include breakpoint (sm) {
z-index: 9;
transform: translate($distance, -1%) rotate($angle) scale($scale);
transform: translate($distance, -1%) rotate($angle) scale($scale) translateZ(0);
}
// Hover
&.hover {
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale) translateZ(0);
}
}
}
@@ -136,7 +137,6 @@
overflow: hidden;
width: 100%;
height: 100%;
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
@extend %willchange;
@include breakpoint (sm) {
@@ -271,15 +271,15 @@
// States
&.is-prev {
transform: translateY(-$distance);
transform: translateY(-$distance) translateZ(0);
}
&.is-active {
transform: translateY(0);
transform: translateY(0) translateZ(0);
opacity: 1;
pointer-events: auto;
}
&.is-next {
transform: translateY($distance);
transform: translateY($distance) translateZ(0);
}
}
@@ -311,18 +311,18 @@
// Active
&.active button {
background-color: $color-secondary;
transform: scale(1.25);
transform: scale(1.25) translateZ(0);
}
// Small dot
&.small button {
transform: scale(0.6);
transform: scale(0.6) translateZ(0);
opacity: 0.5;
}
// Hidden
&.hidden {
padding: 0;
transform: scale(0);
transform: scale(0) translateZ(0);
opacity: 0;
width: 0;
height: 0;

8
src/style/organisms/_fullscreen.scss
View File

@@ -49,13 +49,13 @@
display: flex;
justify-content: center;
opacity: 0;
transform: scale(1.1) translateY(24px);
transform: scale(1.1) translateY(24px) translateZ(0);
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
// Visible state
&.is-visible {
opacity: 1;
transform: scale(1) translateY(0);
transform: scale(1) translateY(0) translateZ(0);
}
}
@@ -66,7 +66,7 @@
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%) translateZ(0);
transform-origin: 50% 50%;
display: flex;
align-items: center;
@@ -79,7 +79,7 @@
// Hidden state
&.is-hidden {
transform: scale(1.05) translate(-50%, -50%);
transform: scale(1.05) translate(-50%, -50%) translateZ(0);
opacity: 0;
}
}

4
src/style/organisms/_pagination.scss
View File

@@ -57,7 +57,7 @@
.scroll {
display: flex;
flex-direction: column;
transform: translate(0, 0);
transform: translate(0, 0) translateZ(0);
text-align: right;
line-height: 0.85;
transition: transform 325ms $ease-cubic;
@@ -70,7 +70,7 @@
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -72%);
transform: translate(-50%, -72%) translateZ(0);
font-family: $font-serif;
font-size: rem(18px);
color: $color-secondary-bright;