⚠️ Fix most animations/transitions performance issues
All checks were successful
continuous-integration/drone/push Build is passing
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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user