motion 10.1.3 → 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/{get-function.cjs.js → utils/get-function.cjs.js}

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var cubicBezier = require('./cubic-bezier.cjs.js');
-var steps = require('./steps.cjs.js');
-var noop = require('../../../utils/noop.cjs.js');
+var cubicBezier = require('../cubic-bezier.cjs.js');
+var steps = require('../steps.cjs.js');
+var noop = require('../../../../utils/noop.cjs.js');
 
 const namedEasings = {
     ease: cubicBezier.cubicBezier(0.25, 0.1, 0.25, 1.0),

package/dist/targets/js/easing/{get-function.es.js → utils/get-function.es.js}

@@ -1,6 +1,6 @@
-import { cubicBezier } from './cubic-bezier.es.js';
-import { steps } from './steps.es.js';
-import { noopReturn } from '../../../utils/noop.es.js';
+import { cubicBezier } from '../cubic-bezier.es.js';
+import { steps } from '../steps.es.js';
+import { noopReturn } from '../../../../utils/noop.es.js';
 
 const namedEasings = {
     ease: cubicBezier(0.25, 0.1, 0.25, 1.0),

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

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const timeStep = 10;
+const maxDuration = 10000;
+function pregenerateKeyframes(generator) {
+    let overshootDuration = undefined;
+    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 ? 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,
+        overshootDuration: (overshootDuration !== null && overshootDuration !== void 0 ? overshootDuration : duration) / 1000,
+    };
+}
+
+exports.pregenerateKeyframes = pregenerateKeyframes;

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

@@ -0,0 +1,30 @@
+const timeStep = 10;
+const maxDuration = 10000;
+function pregenerateKeyframes(generator) {
+    let overshootDuration = undefined;
+    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 ? 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,
+        overshootDuration: (overshootDuration !== null && overshootDuration !== void 0 ? overshootDuration : duration) / 1000,
+    };
+}
+
+export { pregenerateKeyframes };

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var getFunction = require('../targets/js/easing/get-function.cjs.js');
+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/get-function.es.js';
+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/dist/utils/velocity-per-second.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/*
+  Convert velocity into velocity per second
+
+  @param [number]: Unit per frame
+  @param [number]: Frame duration in ms
+*/
+function velocityPerSecond(velocity, frameDuration) {
+    return frameDuration ? velocity * (1000 / frameDuration) : 0;
+}
+
+exports.velocityPerSecond = velocityPerSecond;

package/dist/utils/velocity-per-second.es.js

@@ -0,0 +1,11 @@
+/*
+  Convert velocity into velocity per second
+
+  @param [number]: Unit per frame
+  @param [number]: Frame duration in ms
+*/
+function velocityPerSecond(velocity, frameDuration) {
+    return frameDuration ? velocity * (1000 / frameDuration) : 0;
+}
+
+export { velocityPerSecond };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion",
-  "version": "10.1.3",
+  "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": {
@@ -128,27 +122,27 @@
   "bundlesize": [
     {
       "path": "./dist/size-animate-dom.js",
-      "maxSize": "3.2 kB"
+      "maxSize": "3.3 kB"
     },
     {
       "path": "./dist/size-animate-style.js",
-      "maxSize": "2.8 kB"
+      "maxSize": "2.9 kB"
     },
     {
       "path": "./dist/size-timeline-dom.js",
-      "maxSize": "3.95 kB"
+      "maxSize": "4.1 kB"
     },
     {
       "path": "./dist/size-spring.js",
-      "maxSize": "0.6 kB"
+      "maxSize": "1 kB"
     },
     {
       "path": "./dist/size-react.js",
-      "maxSize": "4.4 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/size-webpack-animate.js",
-      "maxSize": "3.5 kB"
+      "maxSize": "3.4 kB"
     }
   ]
 }

package/types/index.d.ts

@@ -2,4 +2,6 @@ export { animate } from "./targets/dom/animate.js";
 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/data.d.ts

@@ -1,8 +1,2 @@
-import { BasicAnimationControls } from "./types";
-export interface AnimationData {
-    activeTransforms: string[];
-    activeAnimations: {
-        [key: string]: BasicAnimationControls | undefined;
-    };
-}
+import { AnimationData } from "./types";
 export declare function getAnimationData(element: Element): AnimationData;

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,5 +1,18 @@
 import { OptionResolver } from "../../utils/stagger";
+import { AnimationGenerator, AnimationGeneratorState } from "../js/types";
 import { NextTime } from "./timeline/types";
+export interface AnimationData {
+    transforms: string[];
+    animations: {
+        [key: string]: BasicAnimationControls | undefined;
+    };
+    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;
 export declare type BezierDefinition = [number, number, number, number];
@@ -40,18 +53,18 @@ export declare type VariableKeyframesDefinition = {
     [key: `--${string}`]: ValueKeyframesDefinition;
 };
 export declare type MotionKeyframesDefinition = StyleKeyframesDefinition & VariableKeyframesDefinition;
-export declare type Easing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "steps-start" | "steps-end" | `steps(${number}, ${"start" | "end"})` | BezierDefinition;
-export declare type SpringOptions = {
-    stiffness?: number;
-    damping?: number;
-    mass?: number;
-    velocity?: number;
-    restSpeed?: number;
-    restDelta?: number;
+export declare type CustomAnimationSettings = {
+    easing: Easing;
+    keyframes?: number[];
+    duration?: number;
+};
+export declare type CustomEasing = {
+    createAnimation: (keyframes: UnresolvedValueKeyframe[], getOrigin: () => string, isTransform: boolean, name?: string, data?: AnimationData) => CustomAnimationSettings;
 };
+export declare type Easing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "steps-start" | "steps-end" | `steps(${number}, ${"start" | "end"})` | BezierDefinition;
 export declare type KeyframeOptions = {
     duration?: number;
-    easing?: Easing | Easing[];
+    easing?: CustomEasing | Easing | Easing[];
     offset?: number[];
 };
 export declare type PlaybackOptions = {
@@ -60,7 +73,7 @@ export declare type PlaybackOptions = {
     repeat?: number;
     direction?: "normal" | "reverse" | "alternate" | "alternate-reverse";
 };
-export declare type AnimationOptions = SpringOptions & KeyframeOptions & PlaybackOptions & {
+export declare type AnimationOptions = KeyframeOptions & PlaybackOptions & {
     allowWebkitAcceleration?: boolean;
 };
 export interface AnimationWithCommitStyles extends Animation {
@@ -98,11 +111,4 @@ export interface CssPropertyDefinition {
 export declare type CssPropertyDefinitionMap = {
     [key: string]: CssPropertyDefinition;
 };
-export interface PregeneratedAnimation {
-    keyframes: Array<string | number>;
-    duration: number;
-}
-export interface KeyframeGenerator {
-    isKeyframeGenerator: true;
-    generate: (keyframes: number[]) => false | PregeneratedAnimation;
-}
+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/easing.d.ts

@@ -1,5 +1,6 @@
-import { BezierDefinition, Easing } from "../types";
+import { BezierDefinition, CustomEasing, Easing } from "../types";
 export declare const isCubicBezier: (easing: Easing | Easing[]) => easing is BezierDefinition;
 export declare const isEasingList: (easing: Easing | Easing[]) => easing is Easing[];
+export declare const isCustomEasing: (easing: Easing | Easing[] | CustomEasing) => easing is CustomEasing;
 export declare const convertEasing: (easing: Easing) => string;
 export declare const cubicBezierAsString: ([a, b, c, d]: BezierDefinition) => string;

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, offset, repeat, 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

@@ -0,0 +1,6 @@
+import { AnimationGenerator } from "../../types";
+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

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

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

@@ -0,0 +1,10 @@
+export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    restSpeed?: number;
+    restDistance?: number;
+    from?: number;
+    to?: number;
+    velocity?: number;
+}

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;