version 1.2.0 which adds dynamic animation easing via props

scottcanoni · Jun 8, 2022 · 74ed9f9 · 74ed9f9
1 parent e54461c
commit 74ed9f9
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 18 deletions.
diff --git a/dist/components/Anagram.js b/dist/components/Anagram.js
@@ -50,7 +50,9 @@ function Anagram(_ref) {
     randomReverseMin,
     randomReverseMax,
     loopAnimation,
-    waitToStart
+    waitToStart,
+    transitionDuration,
+    timingFunction
   } = animationOptions;
   (0, _react.useEffect)(() => {
     const swaps = [];
@@ -122,7 +124,7 @@ function Anagram(_ref) {
     setTimeout(() => {
       animateFunc();
     }, waitToStart);
-  }, [lettersRefs1, lettersRefs2, loopAnimation, updateAnimation, randomReverseMax, randomReverseMin, randomStartMax, randomStartMin, waitToStart, words]);
+  }, [lettersRefs1, lettersRefs2, loopAnimation, updateAnimation, randomReverseMax, randomReverseMin, randomStartMax, randomStartMin, waitToStart, transitionDuration, timingFunction, words]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "anagram-swap"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -153,18 +155,13 @@ function Anagram(_ref) {
       src,
       dest
     } = renderedLetter;
-    let letterStyles = {};
+    const letterStyles = {
+      transition: "left ".concat(transitionDuration, "ms ").concat(timingFunction, ", top ").concat(transitionDuration, "ms ").concat(timingFunction)
+    };
 
     if (playing) {
-      const left = "".concat(dest.offsetLeft - src.offsetLeft, "px");
-      const top = "".concat(dest.offsetTop - src.offsetTop, "px"); // Trying to fix issue with wrapped text
-      // const left = `${dest.rect.x - src.rect.x}px`;
-      // const top = `${dest.rect.y - src.rect.y}px`;
-
-      letterStyles = {
-        left,
-        top
-      };
+      letterStyles.left = "".concat(dest.offsetLeft - src.offsetLeft, "px");
+      letterStyles.top = "".concat(dest.offsetTop - src.offsetTop, "px");
     }
 
     return /*#__PURE__*/_react.default.createElement("span", {

diff --git a/dist/components/constants.js b/dist/components/constants.js
@@ -24,6 +24,8 @@ const DEFAULT_ANIMATION_OPTIONS = {
   randomReverseMin: 6000,
   randomReverseMax: 9000,
   loopAnimation: 12000,
-  waitToStart: 0
+  waitToStart: 0,
+  transitionDuration: 2000,
+  timingFunction: 'ease-in-out'
 };
 exports.DEFAULT_ANIMATION_OPTIONS = DEFAULT_ANIMATION_OPTIONS;
diff --git a/dist/components/index.css b/dist/components/index.css
@@ -24,5 +24,4 @@
       position: relative;
       left: 0;
       top: 0;
-      /*transition: all, 2s, cubic-bezier(0.1, 0.7, 1.0, 0.1), 2s;*/
-      transition: all, 2s, ease-in-out, 2s; }
+      transition: left 2s ease-in-out, top 2s ease-in-out; }
diff --git a/dist/components/index.scss b/dist/components/index.scss
@@ -28,8 +28,7 @@
             position: relative;
             left: 0;
             top: 0;
-            /*transition: all, 2s, cubic-bezier(0.1, 0.7, 1.0, 0.1), 2s;*/
-            transition: all, 2s, ease-in-out, 2s;
+            transition: left 2s ease-in-out, top 2s ease-in-out;
         }
     }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-anagram-animation",
-    "version": "1.1.3",
+    "version": "1.2.0",
     "author": "Scott Canoni",
     "description": "A React component to use CSS animations to swap letters in 2 words which are an anagram of each other.  The text is animated in position after calculating initial and final positions of each letter.",
     "license": "WTFPL",