react-text-swap-animation 1.3.0 → 1.4.0

package/README.md

@@ -45,22 +45,19 @@ To control the animation speed and timing, you can pass an object of `animationO
     randomReverseMax: 6000,
     loopAnimation: 20000,
     waitToStart: 5000,
+    transitionDuration: 2000,
+    timingFunction: 'ease-in-out',
 }} />
 ```
 
 If you are using an embedded font and need to wait for it to load before animating, 
-then you should specify the `fontToObserve` object with the font family name and/or other font specifics.
+then you should specify the `fontToObserve` property with the font family name.
 
 ```js
-<TextSwap fontToObserve={{ family: 'Open Sans' }} />
+<TextSwap fontToObserve="Open Sans" />
 ```
 ```js
-<TextSwap fontToObserve={{
-    family: 'Roboto',
-    weight: 600,
-    style: 'italic',
-    stretch: 'expanded',
-}} />
+<TextSwap fontToObserve="Roboto" />
 ```
 
 API
@@ -69,43 +66,25 @@ API
 ### Props
 
 | Prop               | Type   | Default                                          | Description                                             |
-| :----------------- | :----- | :------------------------------------------------| :------------------------------------------------------ |
+| :----------------- | :----- |:-------------------------------------------------| :------------------------------------------------------ |
 | `words`            | array  | `['Text Swap Animation', 'Antitoxin Swamp Tea']` | An array containing exactly 2 words which are an anagram of each other. |
 | `animationOptions` | object | `AnimationOptions`                               | Timing options for when to start, how fast to animate forwards, backwards, and when to loop (optional). |
-| `fontToObserve`    | object | `FontToObserve`                                  | A description of an embedded font to observe and wait until loaded.  If not specified, animation will loaded immediately (optional). |
+| `fontToObserve`    | string |                                                          | The name of an embedded font to wait until loaded.  If not specified, animation will loaded immediately (optional). |
 
 #### AnimationOptions
 
-| Property           | Type   | Default | Description                                                                                   |
-| :----------------- | :----- | :------ | :-------------------------------------------------------------------------------------------- |
-| `randomStartMin`   | number | `0`     | The minimum amount of time to randomly wait before starting to animate each letter            |
-| `randomStartMax`   | number | `3000`  | The maximum amount of time to randomly wait before starting to animate each letter            |
-| `randomReverseMin` | number | `6000`  | The minimum amount of time to randomly wait before starting to animate each letter in reverse |
-| `randomReverseMax` | number | `9000`  | The maximum amount of time to randomly wait before starting to animate each letter in reverse |
-| `loopAnimation`    | number | `12000` | The amount of time for each full loop of the animation                                        |
-| `waitToStart`      | number | `0`     | The amount of time to wait before beginning the animation on start up                         |
-
-#### FontToObserve
-
-This object is passed along to [Font Face Observer](https://github.com/iamskok/use-font-face-observer)
-
-| Property  | Type             | Description                                              |
-| :---------| :--------------- | :------------------------------------------------------- |
-| `family`  | string           | The font-family: `Roboto`, `Inter`, `Open Sans`, etc     |
-| `weight`  | string or number | The font-weight: `normal`, `bold`, `800`, etc            |
-| `style`   | string           | The font-style: `normal`, `italic`, `oblique`            |
-| `stretch` | string           | The font stretch: `normal`, `condensed`, `expanded`, etc |
-
-Styling
-----
-
-You can use the CSS transition property to adjust the speed and duration of the animation completely.  Can you find a neat transition animation? Please share! :)
+All time values are in # of milliseconds.  The randomness allows a nice jumble effect.  You can use any values you want to create some fascinating animations.
 
-```css
-.text-swap .word .letter {
-    transition: all, 2s, cubic-bezier(0.1, 0.7, 1.0, 0.1), 2s;
-}
-```
+| Property           | Type   | Default | Description                                                                                   |
+| :------------------- | :----- | :------------ |:--------------------------------------------------------------------------------------------------------------------------------------|
+| `randomStartMin`     | number | `0`           | The minimum amount of time to randomly wait before starting to animate each letter.                                                   |
+| `randomStartMax`     | number | `3000`        | The maximum amount of time to randomly wait before starting to animate each letter. Should be `>= randomStartMin`.                    |
+| `randomReverseMin`   | number | `6000`        | The minimum amount of time to randomly wait before starting to animate each letter in reverse.                                        |
+| `randomReverseMax`   | number | `9000`        | The maximum amount of time to randomly wait before starting to animate each letter in reverse. Should be `>= randomReverseMin`.       |
+| `loopAnimation`      | number | `12000`       | The amount of time to wait before starting the next full loop of the animation. Should be `>= randomReverseMax + transitionDuration`. |
+| `waitToStart`        | number | `0`           | The amount of time to wait before beginning the animation on start up the first time.                                                 |
+| `transitionDuration` | number | `1000`        | How long should it take for a letter to move to its next position. Should be `<= randomReverseMin - randomStartMax`.                  |
+| `timingFunction`     | string | `ease-in-out` | What [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) should be used for the animation.  |
 
 Run Locally
 ----
@@ -117,10 +96,17 @@ To run demo locally:
 
 and a browser will open to the demo.
 
+If you receive `Invalid hook call` errors because you are linking this module, you may need to point this library's React to your app's installed React so there is only one copy.
+
+```
+npm link ../my-app/node_modules/react
+npm link ../my-app/node_modules/react-dom
+```
+
 Future Ideas
 ----
 
-- Supply different animation easing.
+- Supply different animation easing. Done!
 
 
 License

package/dist/components/TextSwap.js

@@ -44,7 +44,9 @@ function TextSwap(_ref) {
     randomReverseMin,
     randomReverseMax,
     loopAnimation,
-    waitToStart
+    waitToStart,
+    transitionDuration,
+    timingFunction
   } = animationOptions;
   (0, _react.useEffect)(() => {
     const swaps = [];
@@ -167,13 +169,12 @@ function TextSwap(_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: "text-swap"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "word word-1 hidden"
   }, [...words[0]].map((letter, i) => {
-    // eslint-disable-next-line react/no-array-index-key
     return /*#__PURE__*/_react.default.createElement("span", {
       ref: lettersRefs1.current[i],
       className: "letter",
@@ -182,7 +183,6 @@ function TextSwap(_ref) {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "word word-2 hidden"
   }, [...words[1]].map((letter, i) => {
-    // eslint-disable-next-line react/no-array-index-key
     return /*#__PURE__*/_react.default.createElement("span", {
       ref: lettersRefs2.current[i],
       className: "letter",
@@ -199,17 +199,19 @@ function TextSwap(_ref) {
       src,
       dest
     } = renderedLetter;
-    let letterStyles;
+    let letterStyles = {
+      transition: "left ".concat(transitionDuration, "ms ").concat(timingFunction, ", top ").concat(transitionDuration, "ms ").concat(timingFunction)
+    };
     if (playing) {
       const left = "".concat(dest.rect.x, "px");
-      letterStyles = {
+      letterStyles = _objectSpread(_objectSpread({}, letterStyles), {}, {
         left
-      };
+      });
     } else {
       const left = "".concat(src.rect.x, "px");
-      letterStyles = {
+      letterStyles = _objectSpread(_objectSpread({}, letterStyles), {}, {
         left
-      };
+      });
     }
     if (disappear) {
       letterStyles.opacity = 0;

package/dist/components/constants.js

@@ -8,22 +8,26 @@ const DEFAULT_WORDS = ['Text Swap Animation', 'Antitoxin Swamp Tea'];
 
 /**
  * @typedef AnimationOptions Timing options for when to start, how fast to animate forwards, backwards, and when to loop.
- * @property {number} randomStartMin The minimum amount of time to randomly wait before starting to animate each letter
- * @property {number} randomStartMax The maximum amount of time to randomly wait before starting to animate each letter
- * @property {number} randomReverseMin The minimum amount of time to randomly wait before starting to animate each letter in reverse
- * @property {number} randomReverseMax The maximum amount of time to randomly wait before starting to animate each letter in reverse
- * @property {number} loopAnimation The amount of time for each full loop of the animation
- * @property {number} waitToStart The amount of time to wait before beginning the animation on start up
+ * @property {number} randomStartMin The minimum amount of time to randomly wait before starting to animate each letter.
+ * @property {number} randomStartMax The maximum amount of time to randomly wait before starting to animate each letter. Should be `>= randomStartMin`.
+ * @property {number} randomReverseMin The minimum amount of time to randomly wait before starting to animate each letter in reverse.
+ * @property {number} randomReverseMax The maximum amount of time to randomly wait before starting to animate each letter in reverse. Should be `>= randomReverseMin`.
+ * @property {number} loopAnimation The amount of time to wait before starting the next full loop of the animation. Should be `>= randomReverseMax + transitionDuration`.
+ * @property {number} waitToStart The amount of time to wait before beginning the animation on start up the first time.
+ * @property {number} transitionDuration How long should it take for a letter to move to its next position. Should be `<= randomReverseMin - randomStartMax`.
+ * @property {string} timingFunction What [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) should be used for the animation.
  */
 
 /** @type AnimationOptions */
 exports.DEFAULT_WORDS = DEFAULT_WORDS;
 const DEFAULT_ANIMATION_OPTIONS = {
-  randomStartMin: 500,
-  randomStartMax: 500,
-  randomReverseMin: 8000,
-  randomReverseMax: 8000,
+  randomStartMin: 0,
+  randomStartMax: 3000,
+  randomReverseMin: 6000,
+  randomReverseMax: 9000,
   loopAnimation: 12000,
-  waitToStart: 0
+  waitToStart: 0,
+  transitionDuration: 1000,
+  timingFunction: 'ease-in-out'
 };
 exports.DEFAULT_ANIMATION_OPTIONS = DEFAULT_ANIMATION_OPTIONS;

package/dist/components/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Loader;
 require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireDefault(require("react"));
-var _useFontFaceObserver = _interopRequireDefault(require("use-font-face-observer"));
+var _useFonts = _interopRequireDefault(require("./useFonts"));
 var _TextSwap = _interopRequireDefault(require("./TextSwap"));
 var _constants = require("./constants");
 require("./index.css");
@@ -16,19 +16,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-/**
- * @typedef FontToObserve A description of an embedded font to observe and wait until loaded.
- * @property {string} [family] The font-family: Roboto, Inter, Open Sans, etc
- * @property {string|number} [weight] The font-weight: normal, bold, 800, etc
- * @property {string} [style] The font-style: normal, italic, oblique
- * @property {string} [stretch] The font stretch: normal, condensed, expanded, etc
- */
-
 /**
  * Render and animate from one word to another word and back again.
  * @param {[string]} [words] The 2 words to animate between.
  * @param {AnimationOptions} [animationOptions] Timing options for when to start, how fast to animate forwards, backwards, and when to loop.
- * @param {FontToObserve} [fontToObserve] A description of an embedded font to observe and wait until loaded.
+ * @param {string} [fontToObserve] A description of an embedded font to observe and wait until loaded.
  * @returns {JSX.Element|null}
  */
 function Loader(_ref) {
@@ -37,8 +29,8 @@ function Loader(_ref) {
     animationOptions = {},
     fontToObserve
   } = _ref;
+  const isFontLoaded = (0, _useFonts.default)(fontToObserve);
   const animOptions = _objectSpread(_objectSpread({}, _constants.DEFAULT_ANIMATION_OPTIONS), animationOptions);
-  const isFontLoaded = (0, _useFontFaceObserver.default)(fontToObserve ? [fontToObserve] : []);
   let word1 = words[0];
   let word2 = words[1];
   const maxLength = Math.max(word1.length, word2.length);

package/dist/components/index.scss

@@ -32,8 +32,7 @@
         .letter {
             z-index: 10;
             position: absolute;
-            /*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;
         }
     }
 }

package/dist/components/useFonts.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFonts;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+var _react = require("react");
+function useFonts() {
+  for (var _len = arguments.length, fontNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    fontNames[_key] = arguments[_key];
+  }
+  const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    // Inspired by https://stackoverflow.com/a/60138011
+    if (!document || !document.fonts) {
+      // eslint-disable-next-line no-console
+      console.warn('Browser does not support document.fonts API');
+      setIsLoaded(true);
+      return;
+    }
+    Promise.all(fontNames.map(fontName => document.fonts.load("16px \"".concat(fontName, "\"")))).then(() => {
+      setIsLoaded(true);
+    });
+  }, [fontNames]);
+  return isLoaded;
+}
+;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-text-swap-animation",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "author": "Scott Canoni",
     "description": "A React component to use CSS animations to swap letters in 2 words. The text is animated in position after calculating initial and final positions of each letter.  Words which are anagrams will animate well, but you can use any words or phrases.",
     "license": "WTFPL",
@@ -29,8 +29,7 @@
         "rearrange"
     ],
     "dependencies": {
-        "core-js": "^3.18.3",
-        "use-font-face-observer": "^1.1.39"
+        "core-js": "^3.18.3"
     },
     "peerDependencies": {
         "react": "^17.0.2 || ^18.2.0",

package/src/index.js

@@ -9,22 +9,35 @@ ReactDOM.render(
             <h1>React Text Swap Animation</h1>
             <h2>Demo</h2>
 
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} />
+            <TextSwap fontToObserve="Open Sans" />
 
             <br />
             <br />
 
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={['a witty saying', 'proves nothing']} />
+            <TextSwap fontToObserve="Open Sans" words={['a witty saying', 'proves nothing']} />
 
             <br />
             <br />
 
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={['don\'t be sad it\'s over', 'be happy that it happened']} />
+            <TextSwap fontToObserve="Open Sans" words={['don\'t be sad it\'s over', 'be happy that it happened']} />
 
             <br />
             <br />
 
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={['debit card', 'bad credit']} />
+            <TextSwap fontToObserve="Open Sans" words={['debit card', 'bad credit']} />
+            <br />
+            <br />
+
+            <TextSwap fontToObserve="Open Sans" words={['debit card', 'bad credit']} animationOptions={{
+                randomStartMin: 0,
+                randomStartMax: 3000,
+                randomReverseMin: 12000,
+                randomReverseMax: 12000,
+                loopAnimation: 20000,
+                waitToStart: 0,
+                transitionDuration: 4000,
+                timingFunction: 'cubic-bezier(0.2,-2,0.8,2)'
+            }} />
         </div>
     </React.StrictMode>,
     document.getElementById('root'),

package/src/lib/components/TextSwap.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import React, { createRef, useCallback, useEffect, useRef, useState } from 'react';
 import { randomMinMax, uuidv4 } from '../utils';
 
@@ -33,6 +34,8 @@ export default function TextSwap({ words, animationOptions }) {
         randomReverseMax,
         loopAnimation,
         waitToStart,
+        transitionDuration,
+        timingFunction,
     } = animationOptions;
 
     useEffect(() => {
@@ -148,14 +151,13 @@ export default function TextSwap({ words, animationOptions }) {
             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 (
         <div className="text-swap">
             <div className="word word-1 hidden">
                 {
                     [...words[0]].map((letter, i) => {
-                        // eslint-disable-next-line react/no-array-index-key
                         return <span ref={lettersRefs1.current[i]} className="letter" key={`${i}${letter}`}>{letter}</span>;
                     })
                 }
@@ -163,7 +165,6 @@ export default function TextSwap({ words, animationOptions }) {
             <div className="word word-2 hidden">
                 {
                     [...words[1]].map((letter, i) => {
-                        // eslint-disable-next-line react/no-array-index-key
                         return <span ref={lettersRefs2.current[i]} className="letter" key={`${i}${letter}`}>{letter}</span>;
                     })
                 }
@@ -173,14 +174,14 @@ export default function TextSwap({ words, animationOptions }) {
                     swapAnimations.map((renderedLetter) => {
                         const { id, letter, playing, disappear, src, dest } = renderedLetter;
 
-                        let letterStyles;
+                        let letterStyles = { transition: `left ${transitionDuration}ms ${timingFunction}, top ${transitionDuration}ms ${timingFunction}` };
                         if (playing) {
                             const left = `${dest.rect.x}px`;
-                            letterStyles = { left };
+                            letterStyles = { ...letterStyles, left };
                         }
                         else {
                             const left = `${src.rect.x}px`;
-                            letterStyles = { left };
+                            letterStyles = { ...letterStyles, left };
                         }
 
                         if (disappear) {

package/src/lib/components/constants.js

@@ -2,20 +2,24 @@ export const DEFAULT_WORDS = ['Text Swap Animation', 'Antitoxin Swamp Tea'];
 
 /**
  * @typedef AnimationOptions Timing options for when to start, how fast to animate forwards, backwards, and when to loop.
- * @property {number} randomStartMin The minimum amount of time to randomly wait before starting to animate each letter
- * @property {number} randomStartMax The maximum amount of time to randomly wait before starting to animate each letter
- * @property {number} randomReverseMin The minimum amount of time to randomly wait before starting to animate each letter in reverse
- * @property {number} randomReverseMax The maximum amount of time to randomly wait before starting to animate each letter in reverse
- * @property {number} loopAnimation The amount of time for each full loop of the animation
- * @property {number} waitToStart The amount of time to wait before beginning the animation on start up
+ * @property {number} randomStartMin The minimum amount of time to randomly wait before starting to animate each letter.
+ * @property {number} randomStartMax The maximum amount of time to randomly wait before starting to animate each letter. Should be `>= randomStartMin`.
+ * @property {number} randomReverseMin The minimum amount of time to randomly wait before starting to animate each letter in reverse.
+ * @property {number} randomReverseMax The maximum amount of time to randomly wait before starting to animate each letter in reverse. Should be `>= randomReverseMin`.
+ * @property {number} loopAnimation The amount of time to wait before starting the next full loop of the animation. Should be `>= randomReverseMax + transitionDuration`.
+ * @property {number} waitToStart The amount of time to wait before beginning the animation on start up the first time.
+ * @property {number} transitionDuration How long should it take for a letter to move to its next position. Should be `<= randomReverseMin - randomStartMax`.
+ * @property {string} timingFunction What [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) should be used for the animation.
  */
 
 /** @type AnimationOptions */
 export const DEFAULT_ANIMATION_OPTIONS = {
-    randomStartMin: 500,
-    randomStartMax: 500,
-    randomReverseMin: 8000,
-    randomReverseMax: 8000,
+    randomStartMin: 0,
+    randomStartMax: 3000,
+    randomReverseMin: 6000,
+    randomReverseMax: 9000,
     loopAnimation: 12000,
     waitToStart: 0,
+    transitionDuration: 1000,
+    timingFunction: 'ease-in-out',
 };

package/src/lib/components/index.jsx

@@ -1,33 +1,24 @@
 import React from 'react';
-import useFontFaceObserver from 'use-font-face-observer';
+import useFonts from './useFonts';
 import TextSwap from './TextSwap';
 import { DEFAULT_ANIMATION_OPTIONS, DEFAULT_WORDS } from './constants';
 
 import './index.css';
 
-/**
- * @typedef FontToObserve A description of an embedded font to observe and wait until loaded.
- * @property {string} [family] The font-family: Roboto, Inter, Open Sans, etc
- * @property {string|number} [weight] The font-weight: normal, bold, 800, etc
- * @property {string} [style] The font-style: normal, italic, oblique
- * @property {string} [stretch] The font stretch: normal, condensed, expanded, etc
- */
-
 /**
  * Render and animate from one word to another word and back again.
  * @param {[string]} [words] The 2 words to animate between.
  * @param {AnimationOptions} [animationOptions] Timing options for when to start, how fast to animate forwards, backwards, and when to loop.
- * @param {FontToObserve} [fontToObserve] A description of an embedded font to observe and wait until loaded.
+ * @param {string} [fontToObserve] A description of an embedded font to observe and wait until loaded.
  * @returns {JSX.Element|null}
  */
 export default function Loader({ words = DEFAULT_WORDS, animationOptions = {}, fontToObserve }) {
+    const isFontLoaded = useFonts(fontToObserve);
     const animOptions = {
         ...DEFAULT_ANIMATION_OPTIONS,
         ...animationOptions,
     };
 
-    const isFontLoaded = useFontFaceObserver(fontToObserve ? [fontToObserve] : []);
-
     let word1 = words[0];
     let word2 = words[1];
     const maxLength = Math.max(word1.length, word2.length);

package/src/lib/components/index.scss

@@ -32,8 +32,7 @@
         .letter {
             z-index: 10;
             position: absolute;
-            /*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;
         }
     }
 }

package/src/lib/components/useFonts.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+export default function useFonts(...fontNames) {
+    const [isLoaded, setIsLoaded] = useState(false);
+
+    useEffect(() => {
+        // Inspired by https://stackoverflow.com/a/60138011
+        if (!document || !document.fonts) {
+            // eslint-disable-next-line no-console
+            console.warn('Browser does not support document.fonts API');
+            setIsLoaded(true);
+
+            return;
+        }
+
+        Promise.all(fontNames.map((fontName) => document.fonts.load(`16px "${fontName}"`))).then(() => {
+            setIsLoaded(true);
+        });
+    }, [fontNames]);
+
+    return isLoaded;
+};