motion 10.1.3 → 10.3.0

package/dist/targets/dom/animate.es.js

@@ -1,25 +1,38 @@
 import { animateStyle } from './animate-style.es.js';
 import { getOptions } from './utils/options.es.js';
 import { resolveElements } from './utils/resolve-elements.es.js';
-import { createAnimationControls } from './utils/controls.es.js';
+import { createAnimations } from './utils/controls.es.js';
 import { resolveOption } from '../../utils/stagger.es.js';
 import { defaults } from './utils/defaults.es.js';
 
 function animate(elements, keyframes, options = {}) {
     var _a;
     elements = resolveElements(elements);
-    const animations = [];
     const numElements = elements.length;
+    /**
+     * Create and start new animations
+     */
+    const animationFactories = [];
     for (let i = 0; i < numElements; i++) {
         const element = elements[i];
         for (const key in keyframes) {
             const valueOptions = getOptions(options, key);
             valueOptions.delay = resolveOption(valueOptions.delay, i, numElements);
             const animation = animateStyle(element, key, keyframes[key], valueOptions);
-            animation && animations.push(animation);
+            animationFactories.push(animation);
         }
     }
-    return createAnimationControls(animations, (_a = options.duration) !== null && _a !== void 0 ? _a : defaults.duration);
+    return createAnimations(animationFactories, 
+    /**
+     * TODO:
+     * If easing is set to spring or glide, duration will be dynamically
+     * generated. Ideally we would dynamically generate this from
+     * animation.effect.getComputedTiming().duration but this isn't
+     * supported in iOS13 or our number polyfill. Perhaps it's possible
+     * to Proxy animations returned from animateStyle that has duration
+     * as a getter.
+     */
+    (_a = options.duration) !== null && _a !== void 0 ? _a : defaults.duration);
 }
 
 export { animate };

package/dist/targets/dom/data.cjs.js

@@ -6,8 +6,10 @@ const data = new WeakMap();
 function getAnimationData(element) {
     if (!data.has(element)) {
         data.set(element, {
-            activeTransforms: [],
-            activeAnimations: {},
+            transforms: [],
+            animations: {},
+            generators: {},
+            prevGeneratorState: {},
         });
     }
     return data.get(element);

package/dist/targets/dom/data.es.js

@@ -2,8 +2,10 @@ const data = new WeakMap();
 function getAnimationData(element) {
     if (!data.has(element)) {
         data.set(element, {
-            activeTransforms: [],
-            activeAnimations: {},
+            transforms: [],
+            animations: {},
+            generators: {},
+            prevGeneratorState: {},
         });
     }
     return data.get(element);

package/dist/targets/dom/style.cjs.js

@@ -11,7 +11,7 @@ const style = {
             ? element.style.getPropertyValue(name)
             : getComputedStyle(element)[name];
         if (!value && value !== 0) {
-            const definition = transforms.transformPropertyDefinitions.get(name);
+            const definition = transforms.transformDefinitions.get(name);
             if (definition)
                 value = definition.initialValue;
         }

package/dist/targets/dom/style.es.js

@@ -1,5 +1,5 @@
 import { isCssVar } from './utils/css-var.es.js';
-import { transformPropertyDefinitions } from './utils/transforms.es.js';
+import { transformDefinitions } from './utils/transforms.es.js';
 
 const style = {
     get: (element, name) => {
@@ -7,7 +7,7 @@ const style = {
             ? element.style.getPropertyValue(name)
             : getComputedStyle(element)[name];
         if (!value && value !== 0) {
-            const definition = transformPropertyDefinitions.get(name);
+            const definition = transformDefinitions.get(name);
             if (definition)
                 value = definition.initialValue;
         }

package/dist/targets/dom/timeline/index.cjs.js

@@ -18,13 +18,14 @@ var sort = require('./utils/sort.cjs.js');
 
 function timeline(definition, options = {}) {
     var _a, _b;
-    const animations = [];
     const animationDefinitions = createAnimationsFromTimeline(definition, options);
-    for (let i = 0; i < animationDefinitions.length; i++) {
-        const animation = animateStyle.animateStyle(...animationDefinitions[i]);
-        animation && animations.push(animation);
-    }
-    return controls.createAnimationControls(animations, 
+    /**
+     * Create and start animations
+     */
+    const animationFactories = animationDefinitions
+        .map((definition) => animateStyle.animateStyle(...definition))
+        .filter(Boolean);
+    return controls.createAnimations(animationFactories, 
     // Get the duration from the first animation definition
     (_b = (_a = animationDefinitions[0]) === null || _a === void 0 ? void 0 : _a[3].duration) !== null && _b !== void 0 ? _b : defaults.defaults.duration);
 }
@@ -69,10 +70,19 @@ function createAnimationsFromTimeline(definition, _a = {}) {
                 const valueSequence = getValueSequence(key, elementSequence);
                 const valueKeyframes = keyframes.keyframesList(keyframes$1[key]);
                 const valueOptions = options.getOptions(options$1, key);
-                const { duration = defaultOptions.duration || defaults.defaults.duration, easing = defaultOptions.easing || defaults.defaults.easing, offset: offset$1 = offset.defaultOffset(valueKeyframes.length), } = valueOptions;
+                let { duration = defaultOptions.duration || defaults.defaults.duration, easing = defaultOptions.easing || defaults.defaults.easing, } = valueOptions;
                 const delay = stagger.resolveOption(options$1.delay, elementIndex, numElements) || 0;
                 const startTime = currentTime + delay;
                 const targetTime = startTime + duration;
+                /**
+                 *
+                 */
+                let { offset: offset$1 = offset.defaultOffset(valueKeyframes.length) } = valueOptions;
+                /**
+                 * If there's only one offset of 0, fill in a second with length 1
+                 *
+                 * TODO: Ensure there's a test that covers this removal
+                 */
                 if (offset$1.length === 1 && offset$1[0] === 0) {
                     offset$1[1] = 1;
                 }

package/dist/targets/dom/timeline/index.es.js

@@ -3,7 +3,7 @@ import { progress } from '../../../utils/progress.es.js';
 import { resolveOption } from '../../../utils/stagger.es.js';
 import { defaultOffset, fillOffset } from '../../js/utils/offset.es.js';
 import { animateStyle } from '../animate-style.es.js';
-import { createAnimationControls } from '../utils/controls.es.js';
+import { createAnimations } from '../utils/controls.es.js';
 import { defaults } from '../utils/defaults.es.js';
 import { keyframesList } from '../utils/keyframes.es.js';
 import { getOptions } from '../utils/options.es.js';
@@ -14,13 +14,14 @@ import { compareByTime } from './utils/sort.es.js';
 
 function timeline(definition, options = {}) {
     var _a, _b;
-    const animations = [];
     const animationDefinitions = createAnimationsFromTimeline(definition, options);
-    for (let i = 0; i < animationDefinitions.length; i++) {
-        const animation = animateStyle(...animationDefinitions[i]);
-        animation && animations.push(animation);
-    }
-    return createAnimationControls(animations, 
+    /**
+     * Create and start animations
+     */
+    const animationFactories = animationDefinitions
+        .map((definition) => animateStyle(...definition))
+        .filter(Boolean);
+    return createAnimations(animationFactories, 
     // Get the duration from the first animation definition
     (_b = (_a = animationDefinitions[0]) === null || _a === void 0 ? void 0 : _a[3].duration) !== null && _b !== void 0 ? _b : defaults.duration);
 }
@@ -65,10 +66,19 @@ function createAnimationsFromTimeline(definition, _a = {}) {
                 const valueSequence = getValueSequence(key, elementSequence);
                 const valueKeyframes = keyframesList(keyframes[key]);
                 const valueOptions = getOptions(options, key);
-                const { duration = defaultOptions.duration || defaults.duration, easing = defaultOptions.easing || defaults.easing, offset = defaultOffset(valueKeyframes.length), } = valueOptions;
+                let { duration = defaultOptions.duration || defaults.duration, easing = defaultOptions.easing || defaults.easing, } = valueOptions;
                 const delay = resolveOption(options.delay, elementIndex, numElements) || 0;
                 const startTime = currentTime + delay;
                 const targetTime = startTime + duration;
+                /**
+                 *
+                 */
+                let { offset = defaultOffset(valueKeyframes.length) } = valueOptions;
+                /**
+                 * If there's only one offset of 0, fill in a second with length 1
+                 *
+                 * TODO: Ensure there's a test that covers this removal
+                 */
                 if (offset.length === 1 && offset[0] === 0) {
                     offset[1] = 1;
                 }

package/dist/targets/dom/timeline/utils/calc-time.cjs.js

@@ -2,9 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var isNumber = require('../../../../utils/is-number.cjs.js');
+
 function calcNextTime(current, next, prev, labels) {
     var _a;
-    if (typeof next === "number") {
+    if (isNumber.isNumber(next)) {
         return next;
     }
     else if (next.startsWith("-") || next.startsWith("+")) {

package/dist/targets/dom/timeline/utils/calc-time.es.js

@@ -1,6 +1,8 @@
+import { isNumber } from '../../../../utils/is-number.es.js';
+
 function calcNextTime(current, next, prev, labels) {
     var _a;
-    if (typeof next === "number") {
+    if (isNumber(next)) {
         return next;
     }
     else if (next.startsWith("-") || next.startsWith("+")) {

package/dist/targets/dom/utils/apply.cjs.js

@@ -2,12 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const createCssVariableRenderer = (element, name) => {
-    return (latest) => element.style.setProperty(name, latest);
-};
-const createStyleRenderer = (element, name) => {
-    return (latest) => (element.style[name] = latest);
-};
+const cssVariableRenderer = (element, name) => (latest) => element.style.setProperty(name, latest);
+const styleRenderer = (element, name) => (latest) => (element.style[name] = latest);
 
-exports.createCssVariableRenderer = createCssVariableRenderer;
-exports.createStyleRenderer = createStyleRenderer;
+exports.cssVariableRenderer = cssVariableRenderer;
+exports.styleRenderer = styleRenderer;

package/dist/targets/dom/utils/apply.es.js

@@ -1,8 +1,4 @@
-const createCssVariableRenderer = (element, name) => {
-    return (latest) => element.style.setProperty(name, latest);
-};
-const createStyleRenderer = (element, name) => {
-    return (latest) => (element.style[name] = latest);
-};
+const cssVariableRenderer = (element, name) => (latest) => element.style.setProperty(name, latest);
+const styleRenderer = (element, name) => (latest) => (element.style[name] = latest);
 
-export { createCssVariableRenderer, createStyleRenderer };
+export { cssVariableRenderer, styleRenderer };

package/dist/targets/dom/utils/controls.cjs.js

@@ -6,7 +6,11 @@ var noop = require('../../../utils/noop.cjs.js');
 var stopAnimation = require('./stop-animation.cjs.js');
 var time = require('./time.cjs.js');
 
-const createAnimationControls = (animations, duration) => new Proxy({ animations, duration }, controls);
+const createAnimation = (factory) => factory();
+const createAnimations = (animationFactory, duration) => new Proxy({
+    animations: animationFactory.map(createAnimation).filter(Boolean),
+    duration,
+}, controls);
 /**
  * TODO:
  * Currently this returns the first animation, ideally it would return
@@ -52,4 +56,4 @@ const controls = {
 const selectFinished = (animation) => animation.finished;
 
 exports.controls = controls;
-exports.createAnimationControls = createAnimationControls;
+exports.createAnimations = createAnimations;

package/dist/targets/dom/utils/controls.es.js

@@ -2,7 +2,11 @@ import { noop } from '../../../utils/noop.es.js';
 import { stopAnimation } from './stop-animation.es.js';
 import { ms } from './time.es.js';
 
-const createAnimationControls = (animations, duration) => new Proxy({ animations, duration }, controls);
+const createAnimation = (factory) => factory();
+const createAnimations = (animationFactory, duration) => new Proxy({
+    animations: animationFactory.map(createAnimation).filter(Boolean),
+    duration,
+}, controls);
 /**
  * TODO:
  * Currently this returns the first animation, ideally it would return
@@ -47,4 +51,4 @@ const controls = {
 };
 const selectFinished = (animation) => animation.finished;
 
-export { controls, createAnimationControls };
+export { controls, createAnimations };

package/dist/targets/dom/utils/css-var.cjs.js

@@ -11,8 +11,8 @@ function registerCssVariable(name) {
         return;
     registeredProperties.add(name);
     try {
-        const { syntax, initialValue } = transforms.transformPropertyDefinitions.has(name)
-            ? transforms.transformPropertyDefinitions.get(name)
+        const { syntax, initialValue } = transforms.transformDefinitions.has(name)
+            ? transforms.transformDefinitions.get(name)
             : {};
         CSS.registerProperty({
             name,

package/dist/targets/dom/utils/css-var.es.js

@@ -1,4 +1,4 @@
-import { transformPropertyDefinitions } from './transforms.es.js';
+import { transformDefinitions } from './transforms.es.js';
 
 const isCssVar = (name) => name.startsWith("--");
 const registeredProperties = new Set();
@@ -7,8 +7,8 @@ function registerCssVariable(name) {
         return;
     registeredProperties.add(name);
     try {
-        const { syntax, initialValue } = transformPropertyDefinitions.has(name)
-            ? transformPropertyDefinitions.get(name)
+        const { syntax, initialValue } = transformDefinitions.has(name)
+            ? transformDefinitions.get(name)
             : {};
         CSS.registerProperty({
             name,

package/dist/targets/dom/utils/easing.cjs.js

@@ -2,12 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const isCubicBezier = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-const isEasingList = (easing) => Array.isArray(easing) && typeof easing[0] !== "number";
+var isNumber = require('../../../utils/is-number.cjs.js');
+
+const isCubicBezier = (easing) => Array.isArray(easing) && isNumber.isNumber(easing[0]);
+const isEasingList = (easing) => Array.isArray(easing) && !isNumber.isNumber(easing[0]);
+const isCustomEasing = (easing) => typeof easing === "object" &&
+    Boolean(easing.createAnimation);
 const convertEasing = (easing) => isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;
 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
 
 exports.convertEasing = convertEasing;
 exports.cubicBezierAsString = cubicBezierAsString;
 exports.isCubicBezier = isCubicBezier;
+exports.isCustomEasing = isCustomEasing;
 exports.isEasingList = isEasingList;

package/dist/targets/dom/utils/easing.es.js

@@ -1,6 +1,10 @@
-const isCubicBezier = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-const isEasingList = (easing) => Array.isArray(easing) && typeof easing[0] !== "number";
+import { isNumber } from '../../../utils/is-number.es.js';
+
+const isCubicBezier = (easing) => Array.isArray(easing) && isNumber(easing[0]);
+const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
+const isCustomEasing = (easing) => typeof easing === "object" &&
+    Boolean(easing.createAnimation);
 const convertEasing = (easing) => isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;
 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
 
-export { convertEasing, cubicBezierAsString, isCubicBezier, isEasingList };
+export { convertEasing, cubicBezierAsString, isCubicBezier, isCustomEasing, isEasingList };

package/dist/targets/dom/utils/feature-detection.cjs.js

@@ -19,13 +19,13 @@ const featureTests = {
     finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
 };
 const results = {};
-const supports = Object.keys(featureTests).reduce((acc, key) => {
-    acc[key] = () => {
+const supports = {};
+for (const key in featureTests) {
+    supports[key] = () => {
         if (results[key] === undefined)
             results[key] = featureTests[key]();
         return results[key];
     };
-    return acc;
-}, {});
+}
 
 exports.supports = supports;

package/dist/targets/dom/utils/feature-detection.es.js

@@ -15,13 +15,13 @@ const featureTests = {
     finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
 };
 const results = {};
-const supports = Object.keys(featureTests).reduce((acc, key) => {
-    acc[key] = () => {
+const supports = {};
+for (const key in featureTests) {
+    supports[key] = () => {
         if (results[key] === undefined)
             results[key] = featureTests[key]();
         return results[key];
     };
-    return acc;
-}, {});
+}
 
 export { supports };

package/dist/targets/dom/utils/get-style-name.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var transforms = require('./transforms.cjs.js');
+
+function getStyleName(key) {
+    if (transforms.transformAlias[key])
+        key = transforms.transformAlias[key];
+    return transforms.isTransform(key) ? transforms.asTransformCssVar(key) : key;
+}
+
+exports.getStyleName = getStyleName;

package/dist/targets/dom/utils/get-style-name.es.js

@@ -0,0 +1,9 @@
+import { isTransform, asTransformCssVar, transformAlias } from './transforms.es.js';
+
+function getStyleName(key) {
+    if (transformAlias[key])
+        key = transformAlias[key];
+    return isTransform(key) ? asTransformCssVar(key) : key;
+}
+
+export { getStyleName };

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

@@ -2,12 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var style = require('../style.cjs.js');
-
-function hydrateKeyframes(keyframes, element, name) {
+function hydrateKeyframes(keyframes, readInitialValue) {
     for (let i = 0; i < keyframes.length; i++) {
         if (keyframes[i] === null) {
-            keyframes[i] = i ? keyframes[i - 1] : style.style.get(element, name);
+            keyframes[i] = i ? keyframes[i - 1] : readInitialValue();
         }
     }
     return keyframes;

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

@@ -1,9 +1,7 @@
-import { style } from '../style.es.js';
-
-function hydrateKeyframes(keyframes, element, name) {
+function hydrateKeyframes(keyframes, readInitialValue) {
     for (let i = 0; i < keyframes.length; i++) {
         if (keyframes[i] === null) {
-            keyframes[i] = i ? keyframes[i - 1] : style.get(element, name);
+            keyframes[i] = i ? keyframes[i - 1] : readInitialValue();
         }
     }
     return keyframes;

package/dist/targets/dom/utils/options.cjs.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
+const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : options;
 
 exports.getOptions = getOptions;

package/dist/targets/dom/utils/options.es.js

@@ -1,3 +1,3 @@
-const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
+const getOptions = (options, key) => options[key] ? Object.assign(Object.assign({}, options), options[key]) : options;
 
 export { getOptions };

package/dist/targets/dom/utils/stop-animation.cjs.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 function stopAnimation(animation) {
+    if (!animation)
+        return;
     // Suppress error thrown by WAAPI
     try {
         /**

package/dist/targets/dom/utils/stop-animation.es.js

@@ -1,4 +1,6 @@
 function stopAnimation(animation) {
+    if (!animation)
+        return;
     // Suppress error thrown by WAAPI
     try {
         /**

package/dist/targets/dom/utils/transforms.cjs.js

@@ -40,7 +40,7 @@ const baseTransformProperties = {
     },
     skew: rotation,
 };
-const transformPropertyDefinitions = new Map();
+const transformDefinitions = new Map();
 const asTransformCssVar = (name) => `--motion-${name}`;
 /**
  * Generate a list of every possible transform key
@@ -49,7 +49,7 @@ const transforms = ["x", "y", "z"];
 order.forEach((name) => {
     axes.forEach((axis) => {
         transforms.push(name + axis);
-        transformPropertyDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
+        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
     });
 });
 /**
@@ -62,11 +62,14 @@ const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.index
 const transformLookup = new Set(transforms);
 const isTransform = (name) => transformLookup.has(name);
 const addTransformToElement = (element, name) => {
-    const { activeTransforms } = data.getAnimationData(element);
-    array.addUniqueItem(activeTransforms, name);
-    element.style.transform = buildTransformTemplate(activeTransforms);
+    // Map x to translateX etc
+    if (transformAlias[name])
+        name = transformAlias[name];
+    const { transforms } = data.getAnimationData(element);
+    array.addUniqueItem(transforms, name);
+    element.style.transform = buildTransformTemplate(transforms);
 };
-const buildTransformTemplate = (activeTransforms) => activeTransforms
+const buildTransformTemplate = (transforms) => transforms
     .sort(compareTransformOrder)
     .reduce(transformListToString, "")
     .trim();
@@ -79,4 +82,4 @@ exports.buildTransformTemplate = buildTransformTemplate;
 exports.compareTransformOrder = compareTransformOrder;
 exports.isTransform = isTransform;
 exports.transformAlias = transformAlias;
-exports.transformPropertyDefinitions = transformPropertyDefinitions;
+exports.transformDefinitions = transformDefinitions;

package/dist/targets/dom/utils/transforms.es.js

@@ -36,7 +36,7 @@ const baseTransformProperties = {
     },
     skew: rotation,
 };
-const transformPropertyDefinitions = new Map();
+const transformDefinitions = new Map();
 const asTransformCssVar = (name) => `--motion-${name}`;
 /**
  * Generate a list of every possible transform key
@@ -45,7 +45,7 @@ const transforms = ["x", "y", "z"];
 order.forEach((name) => {
     axes.forEach((axis) => {
         transforms.push(name + axis);
-        transformPropertyDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
+        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
     });
 });
 /**
@@ -58,14 +58,17 @@ const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.index
 const transformLookup = new Set(transforms);
 const isTransform = (name) => transformLookup.has(name);
 const addTransformToElement = (element, name) => {
-    const { activeTransforms } = getAnimationData(element);
-    addUniqueItem(activeTransforms, name);
-    element.style.transform = buildTransformTemplate(activeTransforms);
+    // Map x to translateX etc
+    if (transformAlias[name])
+        name = transformAlias[name];
+    const { transforms } = getAnimationData(element);
+    addUniqueItem(transforms, name);
+    element.style.transform = buildTransformTemplate(transforms);
 };
-const buildTransformTemplate = (activeTransforms) => activeTransforms
+const buildTransformTemplate = (transforms) => transforms
     .sort(compareTransformOrder)
     .reduce(transformListToString, "")
     .trim();
 const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
 
-export { addTransformToElement, asTransformCssVar, axes, buildTransformTemplate, compareTransformOrder, isTransform, transformAlias, transformPropertyDefinitions };
+export { addTransformToElement, asTransformCssVar, axes, buildTransformTemplate, compareTransformOrder, isTransform, transformAlias, transformDefinitions };