diff --git a/examples/src/components/Plate/index.js b/examples/src/components/Plate/index.js index ad43d13b..42a14540 100644 --- 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 index 16ee7dc3..632d52fc 100644 --- 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 index 840cc677..99d9f305 100644 --- 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 index e127fa7f..0646bb60 100644 --- 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 index 26dc99e3..a966d90d 100644 --- 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 index 98d24af3..85c55494 100644 --- 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 new file mode 100644 index 00000000..d20c80cd --- /dev/null +++ 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 index 5095acb5..21e637d4 100644 --- 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; }