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

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