⚠️ Fix most animations/transitions performance issues
All checks were successful
continuous-integration/drone/push Build is passing

- Basically add `will-change` to CSS elements to enable GPU animations, less choppy, more sassy
- Use requestAnimationFrame over setTimeout
- Avoid repaints AMAP
This commit is contained in:
2020-04-05 16:07:44 +02:00
parent 0b8086e63c
commit bd9b91f480
21 changed files with 129 additions and 89 deletions

View File

@@ -8,6 +8,10 @@
overflow: hidden;
pointer-events: none;
&, * {
will-change: transform, opacity;
}
// Photo
&__image {
width: 100%;
@@ -17,7 +21,6 @@
transform: scale(1.1);
background: $color-primary;
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
will-change: transform, opacity;
img {
position: relative;
@@ -48,7 +51,6 @@
opacity: 0;
transform: scale(1.1) translateY(24px);
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
will-change: transform, opacity;
// Visible state
&.is-visible {
@@ -74,7 +76,6 @@
background-color: $color-primary;
border-radius: 100%;
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
will-change: transform, opacity;
// Hidden state
&.is-hidden {