motion 10.2.1 → 10.3.0

package/dist/targets/js/easing/utils/create-generator-easing.es.js

@@ -0,0 +1,67 @@
+import { pregenerateKeyframes } from './pregenerate-keyframes.es.js';
+
+function createGeneratorEasing(createGenerator) {
+    const keyframesCache = new WeakMap();
+    return (options = {}) => {
+        const generatorCache = new Map();
+        const getGenerator = (from = 0, to = 100, velocity = 0, isScale = false) => {
+            const key = `${from}-${to}-${velocity}-${isScale}`;
+            if (!generatorCache.has(key)) {
+                generatorCache.set(key, createGenerator(Object.assign({ from,
+                    to,
+                    velocity, restSpeed: isScale ? 0.05 : 2, restDistance: isScale ? 0.01 : 0.5 }, options)));
+            }
+            return generatorCache.get(key);
+        };
+        const getKeyframes = (generator) => {
+            if (!keyframesCache.has(generator)) {
+                keyframesCache.set(generator, pregenerateKeyframes(generator));
+            }
+            return keyframesCache.get(generator);
+        };
+        return {
+            createAnimation: (keyframes, getOrigin, canUseGenerator, name, data) => {
+                let settings;
+                let generator;
+                const numKeyframes = keyframes.length;
+                let shouldUseGenerator = canUseGenerator &&
+                    numKeyframes <= 2 &&
+                    keyframes.every(isNumberOrNull);
+                if (shouldUseGenerator) {
+                    const prevAnimationState = name && data && data.prevGeneratorState[name];
+                    const velocity = prevAnimationState &&
+                        (numKeyframes === 1 ||
+                            (numKeyframes === 2 && keyframes[0] === null))
+                        ? prevAnimationState.velocity
+                        : 0;
+                    const target = keyframes[numKeyframes - 1];
+                    const unresolvedOrigin = numKeyframes === 1 ? null : keyframes[0];
+                    const origin = unresolvedOrigin === null
+                        ? prevAnimationState
+                            ? prevAnimationState.value
+                            : parseFloat(getOrigin())
+                        : unresolvedOrigin;
+                    generator = getGenerator(origin, target, velocity, name === null || name === void 0 ? void 0 : name.includes("scale"));
+                    const keyframesMetadata = getKeyframes(generator);
+                    settings = Object.assign(Object.assign({}, keyframesMetadata), { easing: "linear" });
+                }
+                else {
+                    generator = getGenerator(0, 100);
+                    const keyframesMetadata = getKeyframes(generator);
+                    settings = {
+                        easing: "ease",
+                        duration: keyframesMetadata.overshootDuration,
+                    };
+                }
+                // TODO Add test for this
+                if (generator && data && name) {
+                    data.generators[name] = generator;
+                }
+                return settings;
+            },
+        };
+    };
+}
+const isNumberOrNull = (value) => typeof value !== "string";
+
+export { createGeneratorEasing };

package/dist/targets/js/easing/utils/has-reached-target.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function hasReachedTarget(origin, target, current) {
+    return ((origin < target && current >= target) ||
+        (origin > target && current <= target));
+}
+
+exports.hasReachedTarget = hasReachedTarget;

package/dist/targets/js/easing/utils/has-reached-target.es.js

@@ -0,0 +1,6 @@
+function hasReachedTarget(origin, target, current) {
+    return ((origin < target && current >= target) ||
+        (origin > target && current <= target));
+}
+
+export { hasReachedTarget };

package/dist/targets/js/easing/utils/pregenerate-keyframes.cjs.js

@@ -3,24 +3,27 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const timeStep = 10;
-const maxDuration = 3000;
-function pregenerateKeyframes(generator, origin, target) {
-    const keyframes = [];
+const maxDuration = 10000;
+function pregenerateKeyframes(generator) {
     let overshootDuration = undefined;
-    let timestamp = 0;
+    let timestamp = timeStep;
     let state = generator.next(0);
+    const keyframes = [state.value];
     while (!state.done && timestamp < maxDuration) {
         state = generator.next(timestamp);
-        keyframes.push(state.done ? target : state.value);
-        if (overshootDuration === undefined) {
-            if ((origin < target && state.value >= target) ||
-                (origin > target && state.value <= target)) {
-                overshootDuration = timestamp;
-            }
+        keyframes.push(state.done ? state.target : state.value);
+        if (overshootDuration === undefined && state.hasReachedTarget) {
+            overshootDuration = timestamp;
         }
         timestamp += timeStep;
     }
     const duration = timestamp - timeStep;
+    /**
+     * If generating an animation that didn't actually move,
+     * generate a second keyframe so we have an origin and target.
+     */
+    if (keyframes.length === 1)
+        keyframes.push(state.value);
     return {
         keyframes,
         duration: duration / 1000,

package/dist/targets/js/easing/utils/pregenerate-keyframes.es.js

@@ -1,22 +1,25 @@
 const timeStep = 10;
-const maxDuration = 3000;
-function pregenerateKeyframes(generator, origin, target) {
-    const keyframes = [];
+const maxDuration = 10000;
+function pregenerateKeyframes(generator) {
     let overshootDuration = undefined;
-    let timestamp = 0;
+    let timestamp = timeStep;
     let state = generator.next(0);
+    const keyframes = [state.value];
     while (!state.done && timestamp < maxDuration) {
         state = generator.next(timestamp);
-        keyframes.push(state.done ? target : state.value);
-        if (overshootDuration === undefined) {
-            if ((origin < target && state.value >= target) ||
-                (origin > target && state.value <= target)) {
-                overshootDuration = timestamp;
-            }
+        keyframes.push(state.done ? state.target : state.value);
+        if (overshootDuration === undefined && state.hasReachedTarget) {
+            overshootDuration = timestamp;
         }
         timestamp += timeStep;
     }
     const duration = timestamp - timeStep;
+    /**
+     * If generating an animation that didn't actually move,
+     * generate a second keyframe so we have an origin and target.
+     */
+    if (keyframes.length === 1)
+        keyframes.push(state.value);
     return {
         keyframes,
         duration: duration / 1000,

package/dist/targets/react/hooks/use-animation.cjs.js

@@ -28,11 +28,14 @@ function useAnimation(ref, initial, target, options$1, onStart, onComplete) {
         });
         if (Object.keys(targetKeyframe).length && ref.current) {
             onStart === null || onStart === void 0 ? void 0 : onStart(targetKeyframe);
-            const animations = [];
+            const animationFactories = [];
             for (const key in targetKeyframe) {
                 const animation = animateStyle.animateStyle(ref.current, key, targetKeyframe[key], options.getOptions(options$1, key));
-                animation && animations.push(animation);
+                animationFactories.push(animation);
             }
+            const animations = animationFactories
+                .map((factory) => factory())
+                .filter(Boolean);
             Promise.all(animations.map((animation) => animation.finished))
                 .then(() => onComplete === null || onComplete === void 0 ? void 0 : onComplete(targetKeyframe))
                 .catch(noop.noop);

package/dist/targets/react/hooks/use-animation.es.js

@@ -24,11 +24,14 @@ function useAnimation(ref, initial, target, options, onStart, onComplete) {
         });
         if (Object.keys(targetKeyframe).length && ref.current) {
             onStart === null || onStart === void 0 ? void 0 : onStart(targetKeyframe);
-            const animations = [];
+            const animationFactories = [];
             for (const key in targetKeyframe) {
                 const animation = animateStyle(ref.current, key, targetKeyframe[key], getOptions(options, key));
-                animation && animations.push(animation);
+                animationFactories.push(animation);
             }
+            const animations = animationFactories
+                .map((factory) => factory())
+                .filter(Boolean);
             Promise.all(animations.map((animation) => animation.finished))
                 .then(() => onComplete === null || onComplete === void 0 ? void 0 : onComplete(targetKeyframe))
                 .catch(noop);

package/dist/targets/react/utils/keyframes.cjs.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var isNumber = require('../../../utils/is-number.cjs.js');
 var transforms = require('../../dom/utils/transforms.cjs.js');
 
 function convertKeyframesToStyles(keyframes) {
@@ -20,10 +21,11 @@ function convertKeyframesToStyles(keyframes) {
          * If this is a number and we have a default value type, convert the number
          * to this type.
          */
-        const definition = transforms.transformPropertyDefinitions.get(key);
+        const definition = transforms.transformDefinitions.get(key);
         if (definition) {
-            initialKeyframe =
-                typeof value === "number" ? definition.toDefaultUnit(value) : value;
+            initialKeyframe = isNumber.isNumber(value)
+                ? definition.toDefaultUnit(value)
+                : value;
         }
         initialKeyframes[key] = initialKeyframe;
     }

package/dist/targets/react/utils/keyframes.es.js

@@ -1,4 +1,5 @@
-import { isTransform, transformAlias, asTransformCssVar, transformPropertyDefinitions, buildTransformTemplate } from '../../dom/utils/transforms.es.js';
+import { isNumber } from '../../../utils/is-number.es.js';
+import { isTransform, transformAlias, asTransformCssVar, transformDefinitions, buildTransformTemplate } from '../../dom/utils/transforms.es.js';
 
 function convertKeyframesToStyles(keyframes) {
     const initialKeyframes = {};
@@ -16,10 +17,11 @@ function convertKeyframesToStyles(keyframes) {
          * If this is a number and we have a default value type, convert the number
          * to this type.
          */
-        const definition = transformPropertyDefinitions.get(key);
+        const definition = transformDefinitions.get(key);
         if (definition) {
-            initialKeyframe =
-                typeof value === "number" ? definition.toDefaultUnit(value) : value;
+            initialKeyframe = isNumber(value)
+                ? definition.toDefaultUnit(value)
+                : value;
         }
         initialKeyframes[key] = initialKeyframe;
     }

package/dist/utils/is-number.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isNumber = (value) => typeof value === "number";
+
+exports.isNumber = isNumber;

package/dist/utils/is-number.es.js

@@ -0,0 +1,3 @@
+const isNumber = (value) => typeof value === "number";
+
+export { isNumber };

package/dist/utils/stagger.cjs.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var getFunction = require('../targets/js/easing/utils/get-function.cjs.js');
+var isNumber = require('./is-number.cjs.js');
 
 function stagger(duration = 0.1, { start = 0, from = 0, easing } = {}) {
     return (i, total) => {
-        const fromIndex = typeof from === "number" ? from : getFromIndex(from, total);
+        const fromIndex = isNumber.isNumber(from) ? from : getFromIndex(from, total);
         const distance = Math.abs(fromIndex - i);
         let delay = duration * distance;
         if (easing) {

package/dist/utils/stagger.es.js

@@ -1,8 +1,9 @@
 import { getEasingFunction } from '../targets/js/easing/utils/get-function.es.js';
+import { isNumber } from './is-number.es.js';
 
 function stagger(duration = 0.1, { start = 0, from = 0, easing } = {}) {
     return (i, total) => {
-        const fromIndex = typeof from === "number" ? from : getFromIndex(from, total);
+        const fromIndex = isNumber(from) ? from : getFromIndex(from, total);
         const distance = Math.abs(fromIndex - i);
         let delay = duration * distance;
         if (easing) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion",
-  "version": "10.2.1",
+  "version": "10.3.0",
   "description": "The Motion library for the web",
   "author": "Matt Perry",
   "main": "dist/main.cjs.js",
@@ -70,12 +70,6 @@
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
     "@rollup/plugin-replace": "^2.4.1",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/node-logger": "^6.2.9",
-    "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.2.9",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
@@ -102,7 +96,7 @@
     "ts-loader": "^8.3.0",
     "typescript": "^4.4.0-beta",
     "web-animations-js": "^2.3.2",
-    "webpack": "^4.46.0",
+    "webpack": "^5.58.1",
     "webpack-cli": "^4.8.0"
   },
   "husky": {
@@ -140,7 +134,7 @@
     },
     {
       "path": "./dist/size-spring.js",
-      "maxSize": "0.95 kB"
+      "maxSize": "1 kB"
     },
     {
       "path": "./dist/size-react.js",
@@ -148,7 +142,7 @@
     },
     {
       "path": "./dist/size-webpack-animate.js",
-      "maxSize": "3.6 kB"
+      "maxSize": "3.4 kB"
     }
   ]
 }

package/types/index.d.ts

@@ -3,4 +3,5 @@ export { animateStyle } from "./targets/dom/animate-style.js";
 export { timeline } from "./targets/dom/timeline/index.js";
 export { stagger } from "./utils/stagger.js";
 export { spring } from "./targets/js/easing/spring/index.js";
+export { glide } from "./targets/js/easing/glide/index.js";
 export * from "./targets/dom/types";

package/types/targets/dom/animate-style.d.ts

@@ -1,2 +1,2 @@
-import { AnimationOptions, BasicAnimationControls, ValueKeyframesDefinition } from "./types";
-export declare function animateStyle(element: Element, name: string, keyframesDefinition: ValueKeyframesDefinition, options?: AnimationOptions): BasicAnimationControls | undefined;
+import { AnimationFactory, AnimationOptions, ValueKeyframesDefinition } from "./types";
+export declare function animateStyle(element: Element, key: string, keyframesDefinition: ValueKeyframesDefinition, options?: AnimationOptions): AnimationFactory;

package/types/targets/dom/style.d.ts

@@ -1,3 +1,3 @@
 export declare const style: {
-    get: (element: Element, name: string) => any;
+    get: (element: Element, name: string) => string | undefined;
 };

package/types/targets/dom/types.d.ts

@@ -1,14 +1,17 @@
 import { OptionResolver } from "../../utils/stagger";
-import { AnimationGenerator } from "../js/types";
+import { AnimationGenerator, AnimationGeneratorState } from "../js/types";
 import { NextTime } from "./timeline/types";
 export interface AnimationData {
-    activeTransforms: string[];
-    activeAnimations: {
+    transforms: string[];
+    animations: {
         [key: string]: BasicAnimationControls | undefined;
     };
-    activeGenerators: {
+    generators: {
         [key: string]: AnimationGenerator | undefined;
     };
+    prevGeneratorState: {
+        [key: string]: AnimationGeneratorState | undefined;
+    };
 }
 export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 export declare type AcceptedElements = Element | Element[] | NodeListOf<Element> | string;
@@ -108,3 +111,4 @@ export interface CssPropertyDefinition {
 export declare type CssPropertyDefinitionMap = {
     [key: string]: CssPropertyDefinition;
 };
+export declare type AnimationFactory = () => BasicAnimationControls | undefined;

package/types/targets/dom/utils/apply.d.ts

@@ -1,2 +1,3 @@
-export declare const createCssVariableRenderer: (element: Element, name: string) => (latest: string | number) => void;
-export declare const createStyleRenderer: (element: Element, name: string) => (latest: string | number) => string | number;
+export declare type RendererFactory = (element: Element, name: string) => (latest: string | number) => void;
+export declare const cssVariableRenderer: RendererFactory;
+export declare const styleRenderer: RendererFactory;

package/types/targets/dom/utils/controls.d.ts

@@ -1,10 +1,10 @@
-import { AnimationControls, AnimationWithCommitStyles } from "../types";
+import { AnimationControls, AnimationFactory, AnimationWithCommitStyles } from "../types";
 interface AnimationState {
-    duration: number;
     animations: AnimationWithCommitStyles[];
+    duration: number;
     finished?: Promise<any>;
 }
-export declare const createAnimationControls: (animations: AnimationWithCommitStyles[], duration: number) => AnimationControls;
+export declare const createAnimations: (animationFactory: AnimationFactory[], duration: number) => AnimationControls;
 export declare const controls: {
     get: (target: AnimationState, key: string) => number | Promise<any> | (() => void) | undefined;
     set: (target: AnimationState, key: string, value: number) => boolean;

package/types/targets/dom/utils/get-style-name.d.ts

@@ -0,0 +1 @@
+export declare function getStyleName(key: string): string;

package/types/targets/dom/utils/keyframes.d.ts

@@ -1,3 +1,3 @@
 import { UnresolvedValueKeyframe, ValueKeyframe } from "../types";
-export declare function hydrateKeyframes(keyframes: UnresolvedValueKeyframe[], element: Element, name: string): ValueKeyframe[];
+export declare function hydrateKeyframes(keyframes: UnresolvedValueKeyframe[], readInitialValue: () => string | number): ValueKeyframe[];
 export declare const keyframesList: (keyframes: UnresolvedValueKeyframe | UnresolvedValueKeyframe[]) => UnresolvedValueKeyframe[];

package/types/targets/dom/utils/stop-animation.d.ts

@@ -3,4 +3,4 @@ export interface WithCommitStyles {
     commitStyles: VoidFunction;
     cancel: VoidFunction;
 }
-export declare function stopAnimation(animation: BasicAnimationControls): void;
+export declare function stopAnimation(animation?: BasicAnimationControls): void;

package/types/targets/dom/utils/transforms.d.ts

@@ -9,7 +9,7 @@ export declare const transformAlias: {
     y: string;
     z: string;
 };
-export declare const transformPropertyDefinitions: Map<string, CssPropertyDefinition>;
+export declare const transformDefinitions: Map<string, CssPropertyDefinition>;
 export declare const asTransformCssVar: (name: string) => string;
 /**
  * A function to use with Array.sort to sort transform keys by their default order.
@@ -17,4 +17,4 @@ export declare const asTransformCssVar: (name: string) => string;
 export declare const compareTransformOrder: (a: string, b: string) => number;
 export declare const isTransform: (name: string) => boolean;
 export declare const addTransformToElement: (element: HTMLElement, name: string) => void;
-export declare const buildTransformTemplate: (activeTransforms: string[]) => string;
+export declare const buildTransformTemplate: (transforms: string[]) => string;

package/types/targets/js/{animate-number.d.ts → NumberAnimation.d.ts}

@@ -1,5 +1,5 @@
 import { AnimationControls, AnimationOptions } from "../dom/types";
-export declare class Animation implements Omit<AnimationControls, "stop" | "duration"> {
+export declare class NumberAnimation implements Omit<AnimationControls, "stop" | "duration"> {
     private resolve;
     private reject;
     private startTime;
@@ -9,7 +9,7 @@ export declare class Animation implements Omit<AnimationControls, "stop" | "dura
     private t;
     private cancelT;
     playState: AnimationPlayState;
-    constructor(output: (v: number) => void, keyframes: number[], { easing, duration, delay, endDelay, repeat, offset, direction, }: AnimationOptions);
+    constructor(output: (v: number) => void, keyframes?: number[], { easing, duration, delay, endDelay, repeat, offset, direction, }?: AnimationOptions);
     finished: Promise<unknown>;
     play(): void;
     pause(): void;
@@ -22,4 +22,3 @@ export declare class Animation implements Omit<AnimationControls, "stop" | "dura
     get playbackRate(): number;
     set playbackRate(rate: number);
 }
-export declare function animateNumber(output: (v: number) => void, keyframes?: number[], options?: AnimationOptions): Animation;

package/types/targets/js/easing/glide/generator.d.ts

@@ -0,0 +1,5 @@
+import { GlideOptions } from "./types";
+import { AnimationGeneratorState } from "../../types";
+export declare const createGlideGenerator: ({ from, velocity, power, decay, bounceDamping, bounceStiffness, changeTarget, min, max, restDistance, restSpeed, }: GlideOptions) => {
+    next: (t: number) => AnimationGeneratorState;
+};

package/types/targets/js/easing/glide/index.d.ts

@@ -0,0 +1,2 @@
+import { GlideOptions } from "./types";
+export declare const glide: (options?: GlideOptions) => import("../../../..").CustomEasing;

package/types/targets/js/easing/glide/types.d.ts

@@ -0,0 +1,14 @@
+export interface GlideOptions {
+    power?: number;
+    decay?: number;
+    changeTarget?: (v: number) => number;
+    max?: number;
+    min?: number;
+    bounceDamping?: number;
+    bounceStiffness?: number;
+    restSpeed?: number;
+    restDistance?: number;
+    from?: number;
+    to?: number;
+    velocity?: number;
+}

package/types/targets/js/easing/spring/generator.d.ts

@@ -3,3 +3,4 @@ import { SpringOptions } from "./types";
 export declare const calcDampingRatio: (stiffness?: number, damping?: number, mass?: number) => number;
 export declare const calcAngularFreq: (undampedFreq: number, dampingRatio: number) => number;
 export declare const createSpringGenerator: ({ stiffness, damping, mass, from, to, velocity, restSpeed, restDistance, }?: SpringOptions) => AnimationGenerator;
+export declare function calcVelocity(resolveValue: (v: number) => number, t: number, current: number): number;

package/types/targets/js/easing/spring/index.d.ts

@@ -1,3 +1,2 @@
 import { SpringOptions } from "./types";
-import { CustomEasing } from "../../../..";
-export declare function spring(options?: SpringOptions): CustomEasing;
+export declare const spring: (options?: SpringOptions) => import("../../../..").CustomEasing;

package/types/targets/js/easing/utils/create-generator-easing.d.ts

@@ -0,0 +1,3 @@
+import { CustomEasing } from "../../../..";
+import { AnimationGeneratorFactory } from "../../types";
+export declare function createGeneratorEasing<Options extends {} = {}>(createGenerator: AnimationGeneratorFactory<Options>): (options?: Options) => CustomEasing;

package/types/targets/js/easing/utils/has-reached-target.d.ts

@@ -0,0 +1 @@
+export declare function hasReachedTarget(origin: number, target: number, current: number): boolean;

package/types/targets/js/easing/utils/pregenerate-keyframes.d.ts

@@ -4,4 +4,4 @@ export interface KeyframesMetadata {
     duration: number;
     overshootDuration: number;
 }
-export declare function pregenerateKeyframes(generator: AnimationGenerator, origin: number, target: number): KeyframesMetadata;
+export declare function pregenerateKeyframes(generator: AnimationGenerator): KeyframesMetadata;

package/types/targets/js/types.d.ts

@@ -1,9 +1,12 @@
 export declare type EasingFunction = (v: number) => number;
 export declare type AnimationGeneratorState = {
     value: number;
+    target: number;
     done: boolean;
     velocity: number;
+    hasReachedTarget: boolean;
 };
 export declare type AnimationGenerator = {
     next: (t: number) => AnimationGeneratorState;
 };
+export declare type AnimationGeneratorFactory<Options> = (options: Options) => AnimationGenerator;

package/types/utils/is-number.d.ts

@@ -0,0 +1 @@
+export declare const isNumber: (value: unknown) => value is number;