⚠️ 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:
@@ -12,6 +12,10 @@
|
||||
margin-right: 72px;
|
||||
}
|
||||
|
||||
&, a * {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
|
||||
span {
|
||||
display: block;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
p {
|
||||
@@ -80,6 +81,7 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
@@ -142,6 +144,7 @@
|
||||
|
||||
span {
|
||||
display: block;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@include breakpoint (sm) {
|
||||
|
||||
Reference in New Issue
Block a user