fix: removing non-composited animations issue

willmendesneto · Dec 8, 2020 · 0347214 · 0347214
1 parent a3f50c1
commit 0347214
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased][]
 
+### Fixed
+
+- Removing Lighthouse "Avoid non-composited animations" issue. Lighthouse shows warnings from ngx-skeleton-loader.scss -file (progress).
+
+- "Avoid non-composited animations":
+- "Animations which are not composited can be janky and contribute to CLS"
+
+To solve that, instead of using CSS `background-position` the module is now using CSS `translate3d`, which improves the animation by using GPU instead of CPU. Issue fixed and performance boost added 🎉
+
 ## [2.6.1][] - 2020-11-30
 
 ### Fixed
@@ -322,7 +331,5 @@ Now we can define the animation we want to use in `<ngx-skeleton-loader>` compon
 [2.5.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.5.0
 [unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.6.0...HEAD
 [2.6.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.6.0
-
-
-[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.6.1...HEAD
-[2.6.1]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.6.1
+[unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.6.1...HEAD
+[2.6.1]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.6.1
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
   "bundlesize": [
     {
       "path": "./dist/ngx-skeleton-loader/bundles/ngx-skeleton-loader.umd.min.js",
-      "maxSize": "1.40KB"
+      "maxSize": "1.50KB"
     }
   ],
   "dependencies": {

diff --git a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.scss b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.scss
@@ -44,26 +44,47 @@
   */
   &.progress,
   &.progress-dark {
-    animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-    background-size: 200px 100%;
+    &:after,
+    &:before {
+      box-sizing: border-box;
+    }
+    // position: relative;
+    // this adds GPU acceleration
+    transform: translate3d(0, 0, 0);
+
+    &:before {
+      animation: progress 2s ease-in-out infinite;
+      background-size: 200px 100%;
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      width: 200px;
+      height: 100%;
+      content: '';
+    }
   }
 
   &.progress {
-    background-image: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0.6),
-      rgba(255, 255, 255, 0)
-    );
+    &:before {
+      background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0.6),
+        rgba(255, 255, 255, 0)
+      );
+    }
   }
 
   &.progress-dark {
-    background-image: linear-gradient(
-      90deg,
-      transparent,
-      rgba(0, 0, 0, 0.2),
-      transparent
-    );
+    &:before {
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 0, 0, 0.2),
+        transparent
+      );
+    }
   }
 
   /**
@@ -96,10 +117,10 @@
 // CSS Animation Keyframes
 @keyframes progress {
   0% {
-    background-position: -200px 0;
+    transform: translate3d(-200px, 0, 0);
   }
   100% {
-    background-position: calc(200px + 100%) 0;
+    transform: translate3d(calc(200px + 100vw), 0, 0);
   }
 }