Merge pull request Shopify#125 from Shopify/examples-raf

[Examples] Use requestAnimationFrame for a few examples
marksouthard · Jan 20, 2018 · b01b9a6 · b01b9a6
2 parents 40a253c + 8db2421
commit b01b9a6
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 20 deletions.
diff --git a/examples/src/components/Plate/index.js b/examples/src/components/Plate/index.js
@@ -89,7 +89,7 @@ export default class Plate {
 
   _translateEachPlate(x, y) {
     for (const plateLevel in this.plates) {
-      if (!this.plates.hasOwnProperty(plateLevel)) {
+      if (this.plates.hasOwnProperty(plateLevel)) {
         const translateX = flipSign(x * 2) * translateFactors[plateLevel];
         const translateY = flipSign(y * 2) * translateFactors[plateLevel];
 

diff --git a/examples/src/components/Plate/keyframes.scss b/examples/src/components/Plate/keyframes.scss
@@ -3,7 +3,7 @@
 /// Plate keyframes
 ////
 
-@keyframes jelly-small {
+@keyframes plate-small {
   0%,
   100% {
     transform: scale(1, 1);
@@ -30,7 +30,7 @@
   }
 }
 
-@keyframes jelly-medium {
+@keyframes plate-medium {
   0%,
   100% {
     transform: scale(1, 1);
@@ -57,7 +57,7 @@
   }
 }
 
-@keyframes jelly-big {
+@keyframes plate-big {
   0%,
   100% {
     transform: scale(1, 1);

diff --git a/examples/src/components/Plate/variants.scss b/examples/src/components/Plate/variants.scss
@@ -112,7 +112,7 @@
     &:hover {
       .PlateContent,
       .PlateShadow::before {
-        animation-name: jelly-small;
+        animation-name: plate-small;
       }
     }
   }
@@ -131,7 +131,7 @@
     &:hover {
       .PlateContent,
       .PlateShadow::before {
-        animation-name: jelly-medium;
+        animation-name: plate-medium;
       }
     }
   }
@@ -150,7 +150,7 @@
     &:hover {
       .PlateContent,
       .PlateShadow::before {
-        animation-name: jelly-big;
+        animation-name: plate-big;
       }
     }
   }
@@ -165,21 +165,21 @@
   .Plate--levelBottom {
     .PlateContent,
     .PlateShadow::before {
-      animation-name: jelly-small;
+      animation-name: plate-small;
     }
   }
 
   .Plate--levelMiddle {
     .PlateContent,
     .PlateShadow::before {
-      animation-name: jelly-medium;
+      animation-name: plate-medium;
     }
   }
 
   .Plate--levelTop {
     .PlateContent,
     .PlateShadow::before {
-      animation-name: jelly-big;
+      animation-name: plate-big;
     }
   }
 }
diff --git a/examples/src/content/Home/index.js b/examples/src/content/Home/index.js
@@ -23,7 +23,9 @@ export default function Home() {
   });
 
   draggable.on('drag:move', (evt) => {
-    plates.dragWarp(evt.source, evt.sensorEvent);
+    requestAnimationFrame(() => {
+      plates.dragWarp(evt.source, evt.sensorEvent);
+    });
   });
 
   draggable.on('drag:stop', () => {

diff --git a/examples/src/content/shared/match-mirror-size.js b/examples/src/content/shared/match-mirror-size.js
@@ -10,9 +10,11 @@ export default function matchMirrorSize(dragEvent, draggableClass) {
   }
 
   if (overElement) {
-    const overRect = overElement.getBoundingClientRect();
+    requestAnimationFrame(() => {
+      const overRect = overElement.getBoundingClientRect();
 
-    dragEvent.mirror.style.width = `${overRect.width}px`;
-    dragEvent.mirror.style.height = `${overRect.height}px`;
+      dragEvent.mirror.style.width = `${overRect.width}px`;
+      dragEvent.mirror.style.height = `${overRect.height}px`;
+    });
   }
 }
diff --git a/examples/src/styles/examples-app.scss b/examples/src/styles/examples-app.scss
@@ -14,6 +14,7 @@
 
 ///
 /// Global Utilities
+@import 'utilities/global/animation';
 @import 'utilities/global/layout';
 @import 'utilities/global/typography';
 

diff --git a/examples/src/styles/utilities/global/_animation.scss b/examples/src/styles/utilities/global/_animation.scss
@@ -0,0 +1,32 @@
+////
+/// Utilities global
+/// Animation
+////
+
+/* stylelint-disable indentation, rule-empty-line-before, number-no-trailing-zeros */
+@keyframes jelly {
+  0% { transform: scale(1.000, 1.000); }
+  4% { transform: scale(0.947, 0.961); }
+  6% { transform: scale(0.967, 0.990); }
+  8% { transform: scale(0.999, 1.034); }
+ 10% { transform: scale(1.033, 1.075); }
+ 12% { transform: scale(1.041, 1.084); }
+ 14% { transform: scale(1.068, 1.100); }
+ 16% { transform: scale(1.071, 1.100); }
+ 18% { transform: scale(1.081, 1.086); }
+ 20% { transform: scale(1.082, 1.078); }
+ 22% { transform: scale(1.079, 1.060); }
+ 25% { transform: scale(1.073, 1.044); }
+ 27% { transform: scale(1.070, 1.041); }
+ 30% { transform: scale(1.059, 1.035); }
+ 31% { transform: scale(1.057, 1.035); }
+ 36% { transform: scale(1.047, 1.044); }
+ 38% { transform: scale(1.046, 1.047); }
+ 42% { transform: scale(1.044, 1.053); }
+ 45% { transform: scale(1.045, 1.055); }
+ 53% { transform: scale(1.049, 1.051); }
+ 60% { transform: scale(1.051, 1.049); }
+ 75% { transform: scale(1.050, 1.050); }
+100% { transform: scale(1.050, 1.050); }
+}
+/* stylelint-enable indentation, rule-empty-line-before, number-no-trailing-zeros */
diff --git a/examples/src/styles/utilities/shared/_animation.scss b/examples/src/styles/utilities/shared/_animation.scss
@@ -3,10 +3,6 @@
 /// Animation
 ////
 
-@mixin breathe {
-  animation: breathe get-duration(slower) get-duration(fast) get-easing() alternate infinite both;
-}
-
-@mixin pop-animation {
-  animation: pop get-duration() get-easing(excite) both;
+@mixin jelly-animation {
+  animation: jelly get-duration(slower) linear both;
 }