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

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;