motion - npm Package Compare versions

Comparing version 6.0.1-alpha.21 to 6.0.1-alpha.23

dist/es/index.js

 export { animate } from './targets/dom/animate.js';
 export { animateValue } from './targets/dom/animate-value.js';
-export { spring } from './generators/spring/index.js';
+export { animated } from './targets/react/index.js';

dist/es/targets/dom/animate.js

@@ -21,3 +21,2 @@ import { stopAnimation } from './utils/stop-animation.js';
         var _a, _b;
-        console.log("getting", key);
         switch (key) {
@@ -24,0 +23,0 @@ case "finished":

dist/motion.cjs.js

@@ -6,3 +6,4 @@ 'use strict';
 var tslib = require('tslib');
-var popmotion = require('popmotion');
+var react = require('react');
+var framerMotion = require('framer-motion');
 
@@ -300,3 +301,2 @@ function stopAnimation(animation) {
         var _a, _b;
-        console.log("getting", key);
         switch (key) {
@@ -360,159 +360,178 @@ case "finished":
 
-var floatRegex = /(-)?([\d]*\.?[\d])+/g;
-function parseNumberString(value) {
-    if (typeof value === "string" && parseFloat(value).toString() === value) {
-        return parseFloat(value);
-    }
-    return value;
+function hasChanged(a, b) {
+    if (typeof a !== typeof b)
+        return true;
+    if (Array.isArray(a) && Array.isArray(b))
+        return !shallowCompare(a, b);
+    return a !== b;
 }
-var getUnit = function (v) { return v.replace(floatRegex, ""); };
-function makeAnimatable(from, to) {
-    from = parseNumberString(from);
-    to = parseNumberString(to);
-    // If both numbers, animate
-    if (typeof from === "number" && typeof to === "number")
-        return { from: from, to: to };
-    // If one is a number and the other is a unit type
-    if (typeof from === "number" &&
-        typeof to !== "number" &&
-        !isNaN(parseFloat(to))) {
-        var unit_1 = getUnit(to);
-        return { from: from, to: parseFloat(to), toValueType: function (v) { return v + unit_1; } };
+function shallowCompare(next, prev) {
+    var prevLength = prev.length;
+    if (prevLength !== next.length)
+        return false;
+    for (var i = 0; i < prevLength; i++) {
+        if (prev[i] !== next[i])
+            return false;
     }
-    else if (typeof from === "string") {
-        var mixer_1 = popmotion.mixComplex(from, to);
-        return {
-            from: 0,
-            to: 100,
-            toValueType: function (v) { return mixer_1(v / 100); },
-        };
-    }
-    return false;
+    return true;
 }
 
-var defaultStiffness = 100.0;
-var defaultDamping = 10.0;
-var defaultMass = 1.0;
-var calcDampingRatio = function (stiffness, damping, mass) {
-    if (stiffness === void 0) { stiffness = defaultStiffness; }
-    if (damping === void 0) { damping = defaultDamping; }
-    if (mass === void 0) { mass = defaultMass; }
-    return damping / (2 * Math.sqrt(stiffness * mass));
-};
-var calcAngularFreq = function (undampedFreq, dampingRatio) {
-    return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
-};
-var createSpringGenerator = function (_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.stiffness, stiffness = _c === void 0 ? defaultStiffness : _c, _d = _b.damping, damping = _d === void 0 ? 10.0 : _d, _e = _b.mass, mass = _e === void 0 ? 1.0 : _e, _f = _b.from, from = _f === void 0 ? 0 : _f, _g = _b.to, to = _g === void 0 ? 1 : _g, _h = _b.velocity, velocity = _h === void 0 ? 0.0 : _h, _j = _b.restSpeed, restSpeed = _j === void 0 ? 2 : _j, _k = _b.restDelta, restDelta = _k === void 0 ? 0.1 : _k;
-    velocity = velocity ? -(velocity / 1000) : 0.0;
-    var dampingRatio = calcDampingRatio(stiffness, damping, mass);
-    var initialDelta = to - from;
-    var undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
-    var angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
-    var state = {
-        done: false,
-        value: from,
-        velocity: velocity,
+function useAnimation(ref, initial, target, options, onStart, onComplete) {
+    var prevTarget = react.useRef(initial);
+    react.useEffect(function () {
+        if (!target)
+            return;
+        var targetKeyframe = {};
+        var allKeys = new Set(tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(Object.keys(target)), false), tslib.__read(Object.keys(prevTarget.current)), false));
+        allKeys.forEach(function (key) {
+            var next = target[key];
+            if (!hasChanged(next, prevTarget.current[key]))
+                return;
+            /**
+             * TODO: If next is undefined, throw error or record a "base value"
+             * to animate back down to
+             */
+            targetKeyframe[key] = next;
+        });
+        if (Object.keys(targetKeyframe).length && ref.current) {
+            onStart === null || onStart === void 0 ? void 0 : onStart(targetKeyframe);
+            var animations = [];
+            for (var key in targetKeyframe) {
+                var animation = animateValue(ref.current, key, targetKeyframe[key], options);
+                animation && animations.push(animation);
+            }
+            Promise.all(animations.map(function (animation) { return animation.finished; }))
+                .then(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(targetKeyframe); })
+                .catch(noop);
+        }
+        prevTarget.current = target;
+    });
+}
+
+function useGestureState(target, stylesToApply) {
+    var _a = tslib.__read(react.useState(false), 2), isGestureActive = _a[0], setGestureState = _a[1];
+    if (isGestureActive)
+        Object.assign(target, stylesToApply);
+    return setGestureState;
+}
+
+function useHover(target, stylesToApply, _a) {
+    var _b = _a === void 0 ? {} : _a, onPointerEnter = _b.onPointerEnter, onPointerLeave = _b.onPointerLeave;
+    var setGestureState = useGestureState(target, stylesToApply);
+    return stylesToApply
+        ? {
+            onPointerEnter: function (e) {
+                onPointerEnter === null || onPointerEnter === void 0 ? void 0 : onPointerEnter(e);
+                setGestureState(true);
+            },
+            onPointerLeave: function (e) {
+                onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(e);
+                setGestureState(false);
+            },
+        }
+        : {};
+}
+
+function usePress(target, stylesToApply, _a) {
+    var _b = _a === void 0 ? {} : _a, onPointerDown = _b.onPointerDown;
+    var setGestureState = useGestureState(target, stylesToApply);
+    if (!stylesToApply)
+        return {};
+    var onPointerUp = function () {
+        setGestureState(false);
+        window.removeEventListener("pointerup", onPointerUp);
     };
-    var resolveSpring;
-    if (dampingRatio < 1) {
-        // Underdamped spring (bouncy)
-        resolveSpring = function (t) {
-            return to -
-                Math.exp(-dampingRatio * undampedAngularFreq * t) *
-                    (((-velocity + dampingRatio * undampedAngularFreq * initialDelta) /
-                        angularFreq) *
-                        Math.sin(angularFreq * t) +
-                        initialDelta * Math.cos(angularFreq * t));
-        };
-    }
-    else {
-        // Critically damped spring
-        resolveSpring = function (t) {
-            return to -
-                Math.exp(-undampedAngularFreq * t) *
-                    (initialDelta + (velocity + undampedAngularFreq * initialDelta) * t);
-        };
-    }
     return {
-        next: function (t) {
-            state.value = resolveSpring(t);
-            state.velocity =
-                t === 0 ? velocity : calcVelocity(resolveSpring, t, state.value);
-            var isBelowVelocityThreshold = Math.abs(state.velocity) <= restSpeed;
-            var isBelowDisplacementThreshold = Math.abs(to - state.value) <= restDelta;
-            state.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;
-            return state;
+        onPointerDown: function (e) {
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(e);
+            setGestureState(true);
+            window.addEventListener("pointerup", onPointerUp);
         },
     };
-};
-var sampleT = 5; // ms
-function calcVelocity(resolveValue, t, current) {
-    var prevT = Math.max(t - sampleT, 0);
-    return popmotion.velocityPerSecond(current - resolveValue(prevT), 5);
 }
 
-/**
- * The resolution of pregenerated keyframes in milliseconds
- */
-var pregenerationResolution = 10;
-/**
- * The max number of pregenerated keyframes. With pregenerationResolution this
- * gives us a maximum duration of two seconds.
- *
- * It could be possible to remove this limit if we polyfill some repeat
- * logic and generate a new set of keyframes each iteration.
- *
- * Alternatively, because individual keyframes (being CSS variables) run
- * on the main thread, it could also be possible simple to run these
- * animations synchronously.
- */
-var maxPregeneratedKeyframes = 200;
-var spring = function (stiffness, damping, mass, velocity) {
-    if (stiffness === void 0) { stiffness = 200; }
-    if (damping === void 0) { damping = 15; }
-    if (mass === void 0) { mass = 1; }
-    return ({
-        isAnimationGenerator: true,
-        generate: function (definition) {
-            var _a;
-            if (definition.length > 2)
-                return false;
-            var keyframes = [];
-            var animatable = makeAnimatable(definition.length === 1 ? 0 : definition[0], (_a = definition[1]) !== null && _a !== void 0 ? _a : definition[0]);
-            if (animatable === false)
-                return false;
-            var from = animatable.from, to = animatable.to, toValueType = animatable.toValueType;
-            var generator = createSpringGenerator({
-                stiffness: stiffness,
-                damping: damping,
-                mass: mass,
-                velocity: velocity,
-                from: from,
-                to: to,
-            });
-            var isComplete = false;
-            var numPregeneratedKeyframes = 0;
-            var t = 0;
-            while (!isComplete) {
-                numPregeneratedKeyframes++;
-                var _b = generator.next(t), value = _b.value, done = _b.done;
-                keyframes.push(toValueType ? toValueType(value) : value);
-                t += pregenerationResolution;
-                if (numPregeneratedKeyframes > maxPregeneratedKeyframes) {
-                    // TODO Warn in development mode
-                    isComplete = true;
-                }
-                else {
-                    isComplete = done;
-                }
-            }
-            // TODO Return generator or set to element
-            return { keyframes: keyframes, duration: t };
-        },
-    });
-};
+function useExit(target, stylesToApply) {
+    var _a = tslib.__read(framerMotion.usePresence(), 2), isPresent = _a[0], onExitComplete = _a[1];
+    /**
+     * In case we don't have an exit animation defined we still need to
+     * call onExitComplete if it exists so AnimatePresence knows it
+     * can remove this component.
+     */
+    react.useEffect(function () {
+        if (!stylesToApply)
+            onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
+    }, [isPresent]);
+    if (stylesToApply && !isPresent) {
+        Object.assign(target, stylesToApply);
+        return onExitComplete;
+    }
+}
 
+function convertKeyframesToStyles(keyframes) {
+    var initialKeyframes = {};
+    var transformKeys = [];
+    for (var key in keyframes) {
+        var value = keyframes[key];
+        if (isTransform(key)) {
+            if (transformAlias[key])
+                key = transformAlias[key];
+            transformKeys.push(key);
+            key = asTransformCssVar(key);
+        }
+        var initialKeyframe = Array.isArray(value) ? value[0] : value;
+        /**
+         * If this is a number and we have a default value type, convert the number
+         * to this type.
+         */
+        var definition = transformPropertyDefinitions.get(key);
+        if (definition && definition.toDefaultUnit) {
+            initialKeyframe =
+                typeof value === "number" ? definition.toDefaultUnit(value) : value;
+        }
+        initialKeyframes[key] = initialKeyframe;
+    }
+    if (transformKeys.length) {
+        initialKeyframes.transform = buildTransformTemplate(transformKeys);
+    }
+    return initialKeyframes;
+}
+
+function createAnimatedComponent(Component) {
+    function Animated(_a, _externalRef) {
+        var _b = _a.options, options = _b === void 0 ? {} : _b, style = _a.style, initial = _a.initial, hover = _a.hover, press = _a.press, exit = _a.exit, onStart = _a.onStart, onComplete = _a.onComplete, props = tslib.__rest(_a, ["options", "style", "initial", "hover", "press", "exit", "onStart", "onComplete"]);
+        /**
+         * We only ever pass the initally-provided styles to React, animating
+         * further updates ourselves.
+         */
+        var renderedStyle = react.useRef(null);
+        renderedStyle.current || (renderedStyle.current = convertKeyframesToStyles(tslib.__assign(tslib.__assign({}, style), initial)));
+        var target = tslib.__assign(tslib.__assign({}, initial), style);
+        var hoverProps = useHover(target, hover, props);
+        var pressProps = usePress(target, press, props);
+        var onExitComplete = useExit(target, exit);
+        var ref = react.useRef(null);
+        useAnimation(ref, tslib.__assign(tslib.__assign({}, style), initial), target, options, onStart, function (animation) {
+            onComplete && onComplete(animation);
+            onExitComplete && onExitComplete();
+        });
+        return react.createElement(Component, Object.assign({}, props, hoverProps, pressProps, {
+            style: renderedStyle.current,
+            ref: ref,
+        }));
+    }
+    return react.forwardRef(Animated);
+}
+
+var components = new Map();
+var animated = new Proxy({}, {
+    get: function (_, key) {
+        if (!components.has(key)) {
+            components.set(key, createAnimatedComponent(key));
+        }
+        return components.get(key);
+    },
+});
+
 exports.animate = animate;
 exports.animateValue = animateValue;
-exports.spring = spring;
+exports.animated = animated;

dist/motion.min.js

@@ -1,1 +0,1 @@
-!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";function r(t){t.commitStyles(),t.cancel()}var n=new WeakMap;function e(t){return n.has(t)||n.set(t,{activeTransforms:[],activeAnimations:{}}),n.get(t)}var a=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},i={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(t){return t+"deg"}},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(t){return t+"px"}},rotate:i,scale:{syntax:"<number>",initialValue:1},skew:i},s=new Map,f=function(t){return"--motion-"+t},c=["x","y","z"];function l(t,r){return c.indexOf(t)-c.indexOf(r)}["translate","scale","rotate","skew"].forEach((function(t){a.forEach((function(r){c.push(t+r),s.set(f(t+r),u[t])}))}));var v=new Set(c),p=function(t){return t.sort(l).reduce(d,"").trim()},d=function(t,r){return t+" "+r+"(var("+f(r)+"))"},m=function(t){return t.startsWith("--")},h=new Set;var y=function(){},g=function(t){return 1e3*t},b=function(){return(b=Object.assign||function(t){for(var r,n=1,e=arguments.length;n<e;n++)for(var a in r=arguments[n])Object.prototype.hasOwnProperty.call(r,a)&&(t[a]=r[a]);return t}).apply(this,arguments)};var x=function(t){return Array.isArray(t)&&"number"!=typeof t[0]},M=function(t){return function(t){return Array.isArray(t)&&"number"==typeof t[0]}(t)?w(t):t},w=function(t){var r=function(t,r){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var e,a,o=n.call(t),i=[];try{for(;(void 0===r||r-- >0)&&!(e=o.next()).done;)i.push(e.value)}catch(t){a={error:t}}finally{try{e&&!e.done&&(n=o.return)&&n.call(o)}finally{if(a)throw a.error}}return i}(t,4);return"cubic-bezier("+r[0]+", "+r[1]+", "+r[2]+", "+r[3]+")"};var A={cssRegisterProperty:function(){return"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty")},waapi:function(){return Object.hasOwnProperty.call(Element.prototype,"animate")},partialKeyframes:function(){try{document.createElement("div").animate({opacity:[1]},{duration:.001})}catch(t){return!1}return!0}},O={},S=Object.keys(A).reduce((function(t,r){return t[r]=function(){return void 0===O[r]&&(O[r]=A[r]()),O[r]},t}),{});function P(t,n,a,i){var u,c=void 0===i?{}:i,l=c.duration,d=void 0===l?.3:l,b=c.delay,w=void 0===b?0:b,A=c.endDelay,O=void 0===A?0:A,P=c.repeat,T=void 0===P?0:P,F=c.easing,k=void 0===F?"ease":F,V=c.direction,j=c.offset,D=e(t),N=!0,C=y;if(a=Array.isArray(a)?a:[a],function(t){return v.has(t)}(n)&&(o[n]&&(n=o[n]),function(t,r){var n,a,o=e(t).activeTransforms;a=r,-1===(n=o).indexOf(a)&&n.push(a),t.style.transform=p(o)}(t,n),n=f(n)),function(t,n){t.activeAnimations[n]&&(r(t.activeAnimations[n]),t.activeAnimations[n]=void 0)}(D,n),function(t){return"object"==typeof t&&t.isAnimationGenerator}(k)){var E=k.generate(a);k="linear",!1!==E&&(a=E.keyframes,d=E.duration)}var R=s.get(n);R&&R.toDefaultUnit&&(a=a.map((function(t){return"number"==typeof t?R.toDefaultUnit(t):t})));var q=a[a.length-1];if(m(n)?(C=function(){t.style.setProperty(n,q)},S.cssRegisterProperty()?function(t){if(!h.has(t)){h.add(t);try{var r=s.has(t)?s.get(t):{},n=r.syntax,e=r.initialValue;CSS.registerProperty({name:t,inherits:!1,syntax:n,initialValue:e})}catch(t){}}}(n):N=!1):C=function(){t.style[n]=q},S.waapi()&&N){if(!S.partialKeyframes()&&1===a.length){var I=m(n)?t.style.getPropertyValue(n):getComputedStyle(t)[n];a.unshift(I)}var U=t.animate(((u={})[n]=a,u.offset=j,u.easing=x(k)?function(t){return t.map(M)}(k):void 0,u),{delay:g(w),duration:g(d),endDelay:g(O),easing:x(k)?void 0:M(k),direction:V,iterations:T+1});return D.activeAnimations[n]=U,U.finished.then(C).catch(y),U}C()}var T=function(t,r){return t[r]?b(b({},t),t[r]):t};var F={get:function(t,n){var e,a;switch(console.log("getting",n),n){case"finished":return t.finished;case"currentTime":var o=(null===(e=t.animations[0])||void 0===e?void 0:e[n])||0;return o?o/1e3:0;case"playbackRate":return null===(a=t.animations[0])||void 0===a?void 0:a[n];case"stop":return function(){return t.animations.forEach(r)};default:return function(){return t.animations.forEach((function(t){return t[n]()}))}}},set:function(t,r,n){switch(r){case"currentTime":n*=1e3;case"currentTime":case"playbackRate":for(var e=0;e<t.animations.length;e++)t.animations[e][r]=n;return!0}return!1}},k=function(t,r,n){return-n*t+n*r+t},V=function(t,r){return function(n){return Math.max(Math.min(n,r),t)}},j=function(t){return t%1?Number(t.toFixed(5)):t},D=/(-)?([\d]*\.?[\d])+/g,N=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,C=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function E(t){return"string"==typeof t}var R={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},q=b(b({},R),{transform:V(0,1)});b(b({},R),{default:1});var I,U=(I="%",{test:function(t){return E(t)&&t.endsWith(I)&&1===t.split(" ").length},parse:parseFloat,transform:function(t){return""+t+I}});b(b({},U),{parse:function(t){return U.parse(t)/100},transform:function(t){return U.transform(100*t)}});var W=function(t,r){return function(n){return Boolean(E(n)&&C.test(n)&&n.startsWith(t)||r&&Object.prototype.hasOwnProperty.call(n,r))}},z=function(t,r,n){return function(e){var a;if(!E(e))return e;var o=e.match(D),i=o[0],u=o[1],s=o[2],f=o[3];return(a={})[t]=parseFloat(i),a[r]=parseFloat(u),a[n]=parseFloat(s),a.alpha=void 0!==f?parseFloat(f):1,a}},G={test:W("hsl","hue"),parse:z("hue","saturation","lightness"),transform:function(t){var r=t.hue,n=t.saturation,e=t.lightness,a=t.alpha,o=void 0===a?1:a;return"hsla("+Math.round(r)+", "+U.transform(j(n))+", "+U.transform(j(e))+", "+j(q.transform(o))+")"}},$=V(0,255),B=b(b({},R),{transform:function(t){return Math.round($(t))}}),K={test:W("rgb","red"),parse:z("red","green","blue"),transform:function(t){var r=t.red,n=t.green,e=t.blue,a=t.alpha,o=void 0===a?1:a;return"rgba("+B.transform(r)+", "+B.transform(n)+", "+B.transform(e)+", "+j(q.transform(o))+")"}};var X={test:W("#"),parse:function(t){var r="",n="",e="",a="";return t.length>5?(r=t.substr(1,2),n=t.substr(3,2),e=t.substr(5,2),a=t.substr(7,2)):(r=t.substr(1,1),n=t.substr(2,1),e=t.substr(3,1),a=t.substr(4,1),r+=r,n+=n,e+=e,a+=a),{red:parseInt(r,16),green:parseInt(n,16),blue:parseInt(e,16),alpha:a?parseInt(a,16)/255:1}},transform:K.transform},Y=function(t){return K.test(t)||X.test(t)||G.test(t)},Z=function(t){return K.test(t)?K.parse(t):G.test(t)?G.parse(t):X.parse(t)},_=function(t){return E(t)?t:t.hasOwnProperty("red")?K.transform(t):G.transform(t)},H="${c}",L="${n}";function J(t){var r=[],n=0,e=t.match(N);e&&(n=e.length,t=t.replace(N,H),r.push.apply(r,e.map(Z)));var a=t.match(D);return a&&(t=t.replace(D,L),r.push.apply(r,a.map(R.parse))),{values:r,numColors:n,tokenised:t}}function Q(t){return J(t).values}function tt(t){var r=J(t),n=r.values,e=r.numColors,a=r.tokenised,o=n.length;return function(t){for(var r=a,n=0;n<o;n++)r=r.replace(n<e?H:L,n<e?_(t[n]):j(t[n]));return r}}var rt=function(t){return"number"==typeof t?0:t};var nt={test:function(t){var r,n,e,a;return isNaN(t)&&E(t)&&(null!==(n=null===(r=t.match(D))||void 0===r?void 0:r.length)&&void 0!==n?n:0)+(null!==(a=null===(e=t.match(N))||void 0===e?void 0:e.length)&&void 0!==a?a:0)>0},parse:Q,createTransformer:tt,getAnimatableNone:function(t){var r=Q(t);return tt(t)(r.map(rt))}},et=function(t,r,n){var e=t*t,a=r*r;return Math.sqrt(Math.max(0,n*(a-e)+e))},at=[X,K,G],ot=function(t){return at.find((function(r){return r.test(t)}))},it=function(t,r){return function(n){return r(t(n))}};function ut(t,r){return"number"==typeof t?function(n){return k(t,r,n)}:Y(t)?function(t,r){var n=ot(t),e=ot(r);n.transform,e.transform;var a=n.parse(t),o=e.parse(r),i=b({},a),u=n===G?k:et;return function(t){for(var r in i)"alpha"!==r&&(i[r]=u(a[r],o[r],t));return i.alpha=k(a.alpha,o.alpha,t),n.transform(i)}}(t,r):ct(t,r)}var st=function(t,r){var n=function(t,r,n){if(n||2===arguments.length)for(var e,a=0,o=r.length;a<o;a++)!e&&a in r||(e||(e=Array.prototype.slice.call(r,0,a)),e[a]=r[a]);return t.concat(e||r)}([],t),e=n.length,a=t.map((function(t,n){return ut(t,r[n])}));return function(t){for(var r=0;r<e;r++)n[r]=a[r](t);return n}};function ft(t){for(var r=nt.parse(t),n=r.length,e=0,a=0,o=0,i=0;i<n;i++)e||"number"==typeof r[i]?e++:void 0!==r[i].hue?o++:a++;return{parsed:r,numNumbers:e,numRGB:a,numHSL:o}}var ct=function(t,r){var n=nt.createTransformer(r),e=ft(t),a=ft(r);return function(){for(var t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];return t.reduce(it)}(st(e.parsed,a.parsed),n)};var lt=/(-)?([\d]*\.?[\d])+/g;function vt(t){return"string"==typeof t&&parseFloat(t).toString()===t?parseFloat(t):t}function pt(t,r){if(t=vt(t),r=vt(r),"number"==typeof t&&"number"==typeof r)return{from:t,to:r};if("number"==typeof t&&"number"!=typeof r&&!isNaN(parseFloat(r))){var n=r.replace(lt,"");return{from:t,to:parseFloat(r),toValueType:function(t){return t+n}}}if("string"==typeof t){var e=ct(t,r);return{from:0,to:100,toValueType:function(t){return e(t/100)}}}return!1}var dt=function(t){var r=void 0===t?{}:t,n=r.stiffness,e=void 0===n?100:n,a=r.damping,o=void 0===a?10:a,i=r.mass,u=void 0===i?1:i,s=r.from,f=void 0===s?0:s,c=r.to,l=void 0===c?1:c,v=r.velocity,p=void 0===v?0:v,d=r.restSpeed,m=void 0===d?2:d,h=r.restDelta,y=void 0===h?.1:h;p=p?-p/1e3:0;var g,b=function(t,r,n){return void 0===t&&(t=100),void 0===r&&(r=10),void 0===n&&(n=1),r/(2*Math.sqrt(t*n))}(e,o,u),x=l-f,M=Math.sqrt(e/u)/1e3,w=function(t,r){return t*Math.sqrt(1-r*r)}(M,b),A={done:!1,value:f,velocity:p};return g=b<1?function(t){return l-Math.exp(-b*M*t)*((b*M*x-p)/w*Math.sin(w*t)+x*Math.cos(w*t))}:function(t){return l-Math.exp(-M*t)*(x+(p+M*x)*t)},{next:function(t){A.value=g(t),A.velocity=0===t?p:function(t,r,n){var e=Math.max(r-5,0);return function(t,r){return r?t*(1e3/r):0}(n-t(e),5)}(g,t,A.value);var r=Math.abs(A.velocity)<=m,n=Math.abs(l-A.value)<=y;return A.done=r&&n,A}}};t.animate=function(t,r,n){void 0===n&&(n={});var e={animations:[]};for(var a in r){var o=T(n,a),i=P(t,a,r[a],o);i&&e.animations.push(i)}return e.finished=Promise.all(e.animations.map((function(t){return t.finished}))),new Proxy(e,F)},t.animateValue=P,t.spring=function(t,r,n,e){return void 0===t&&(t=200),void 0===r&&(r=15),void 0===n&&(n=1),{isAnimationGenerator:!0,generate:function(a){var o;if(a.length>2)return!1;var i=[],u=pt(1===a.length?0:a[0],null!==(o=a[1])&&void 0!==o?o:a[0]);if(!1===u)return!1;for(var s=u.from,f=u.to,c=u.toValueType,l=dt({stiffness:t,damping:r,mass:n,velocity:e,from:s,to:f}),v=!1,p=0,d=0;!v;){p++;var m=l.next(d),h=m.value,y=m.done;i.push(c?c(h):h),d+=10,v=p>200||y}return{keyframes:i,duration:d}}}},Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).Motion={},n.React)}(this,(function(n,t){"use strict";function e(n){n.commitStyles(),n.cancel()}var r=new WeakMap;function i(n){return r.has(n)||r.set(n,{activeTransforms:[],activeAnimations:{}}),r.get(n)}var a=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},u={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(n){return n+"deg"}},c={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(n){return n+"px"}},rotate:u,scale:{syntax:"<number>",initialValue:1},skew:u},f=new Map,s=function(n){return"--motion-"+n},l=["x","y","z"];function v(n,t){return l.indexOf(n)-l.indexOf(t)}["translate","scale","rotate","skew"].forEach((function(n){a.forEach((function(t){l.push(n+t),f.set(s(n+t),c[n])}))}));var y=new Set(l),p=function(n){return y.has(n)},d=function(n){return n.sort(v).reduce(m,"").trim()},m=function(n,t){return n+" "+t+"(var("+s(t)+"))"},h=function(n){return n.startsWith("--")},g=new Set;var b=function(){},w=function(n){return 1e3*n},O=function(){return(O=Object.assign||function(n){for(var t,e=1,r=arguments.length;e<r;e++)for(var i in t=arguments[e])Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n}).apply(this,arguments)};function x(n,t){var e="function"==typeof Symbol&&n[Symbol.iterator];if(!e)return n;var r,i,a=e.call(n),o=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)o.push(r.value)}catch(n){i={error:n}}finally{try{r&&!r.done&&(e=a.return)&&e.call(a)}finally{if(i)throw i.error}}return o}function P(n,t,e){if(e||2===arguments.length)for(var r,i=0,a=t.length;i<a;i++)!r&&i in t||(r||(r=Array.prototype.slice.call(t,0,i)),r[i]=t[i]);return n.concat(r||t)}var A=function(n){return Array.isArray(n)&&"number"!=typeof n[0]},j=function(n){return function(n){return Array.isArray(n)&&"number"==typeof n[0]}(n)?S(n):n},S=function(n){var t=x(n,4);return"cubic-bezier("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+")"};var E={cssRegisterProperty:function(){return"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty")},waapi:function(){return Object.hasOwnProperty.call(Element.prototype,"animate")},partialKeyframes:function(){try{document.createElement("div").animate({opacity:[1]},{duration:.001})}catch(n){return!1}return!0}},k={},D=Object.keys(E).reduce((function(n,t){return n[t]=function(){return void 0===k[t]&&(k[t]=E[t]()),k[t]},n}),{});function R(n,t,r,a){var u,c=void 0===a?{}:a,l=c.duration,v=void 0===l?.3:l,y=c.delay,m=void 0===y?0:y,O=c.endDelay,x=void 0===O?0:O,P=c.repeat,S=void 0===P?0:P,E=c.easing,k=void 0===E?"ease":E,R=c.direction,C=c.offset,T=i(n),V=!0,U=b;if(r=Array.isArray(r)?r:[r],p(t)&&(o[t]&&(t=o[t]),function(n,t){var e,r,a=i(n).activeTransforms;r=t,-1===(e=a).indexOf(r)&&e.push(r),n.style.transform=d(a)}(n,t),t=s(t)),function(n,t){n.activeAnimations[t]&&(e(n.activeAnimations[t]),n.activeAnimations[t]=void 0)}(T,t),function(n){return"object"==typeof n&&n.isAnimationGenerator}(k)){var M=k.generate(r);k="linear",!1!==M&&(r=M.keyframes,v=M.duration)}var L=f.get(t);L&&L.toDefaultUnit&&(r=r.map((function(n){return"number"==typeof n?L.toDefaultUnit(n):n})));var z=r[r.length-1];if(h(t)?(U=function(){n.style.setProperty(t,z)},D.cssRegisterProperty()?function(n){if(!g.has(n)){g.add(n);try{var t=f.has(n)?f.get(n):{},e=t.syntax,r=t.initialValue;CSS.registerProperty({name:n,inherits:!1,syntax:e,initialValue:r})}catch(n){}}}(t):V=!1):U=function(){n.style[t]=z},D.waapi()&&V){if(!D.partialKeyframes()&&1===r.length){var K=h(t)?n.style.getPropertyValue(t):getComputedStyle(n)[t];r.unshift(K)}var W=n.animate(((u={})[t]=r,u.offset=C,u.easing=A(k)?function(n){return n.map(j)}(k):void 0,u),{delay:w(m),duration:w(v),endDelay:w(x),easing:A(k)?void 0:j(k),direction:R,iterations:S+1});return T.activeAnimations[t]=W,W.finished.then(U).catch(b),W}U()}var C=function(n,t){return n[t]?O(O({},n),n[t]):n};var T={get:function(n,t){var r,i;switch(t){case"finished":return n.finished;case"currentTime":var a=(null===(r=n.animations[0])||void 0===r?void 0:r[t])||0;return a?a/1e3:0;case"playbackRate":return null===(i=n.animations[0])||void 0===i?void 0:i[t];case"stop":return function(){return n.animations.forEach(e)};default:return function(){return n.animations.forEach((function(n){return n[t]()}))}}},set:function(n,t,e){switch(t){case"currentTime":e*=1e3;case"currentTime":case"playbackRate":for(var r=0;r<n.animations.length;r++)n.animations[r][t]=e;return!0}return!1}};function V(n,e,r,i,a,o){var u=t.useRef(e);t.useEffect((function(){if(r){var t={};if(new Set(P(P([],x(Object.keys(r)),!1),x(Object.keys(u.current)),!1)).forEach((function(n){var e,i,a=r[n];(e=a,i=u.current[n],typeof e==typeof i&&(Array.isArray(e)&&Array.isArray(i)?function(n,t){var e=t.length;if(e!==n.length)return!1;for(var r=0;r<e;r++)if(t[r]!==n[r])return!1;return!0}(e,i):e===i))||(t[n]=a)})),Object.keys(t).length&&n.current){null==a||a(t);var e=[];for(var c in t){var f=R(n.current,c,t[c],i);f&&e.push(f)}Promise.all(e.map((function(n){return n.finished}))).then((function(){return null==o?void 0:o(t)})).catch(b)}u.current=r}}))}function U(n,e){var r=x(t.useState(!1),2),i=r[0],a=r[1];return i&&Object.assign(n,e),a}var M=t.createContext(null);var L=0,z=function(){return L++},K=function(){return n=z,null===(e=t.useRef(null)).current&&(e.current=n()),e.current;var n,e};function W(n,e){var r=x(function(){var n=t.useContext(M);if(null===n)return[!0,null];var e=n.isPresent,r=n.onExitComplete,i=n.register,a=K();return t.useEffect((function(){return i(a)}),[]),!e&&r?[!1,function(){return null==r?void 0:r(a)}]:[!0]}(),2),i=r[0],a=r[1];if(t.useEffect((function(){e||null==a||a()}),[i]),e&&!i)return Object.assign(n,e),a}function X(n){return t.forwardRef((function(e,r){var i=e.options,a=void 0===i?{}:i,u=e.style,c=e.initial,l=e.hover,v=e.press,y=e.exit,m=e.onStart,h=e.onComplete,g=function(n,t){var e={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.indexOf(r)<0&&(e[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(n);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(n,r[i])&&(e[r[i]]=n[r[i]])}return e}(e,["options","style","initial","hover","press","exit","onStart","onComplete"]),b=t.useRef(null);b.current||(b.current=function(n){var t={},e=[];for(var r in n){var i=n[r];p(r)&&(o[r]&&(r=o[r]),e.push(r),r=s(r));var a=Array.isArray(i)?i[0]:i,u=f.get(r);u&&u.toDefaultUnit&&(a="number"==typeof i?u.toDefaultUnit(i):i),t[r]=a}return e.length&&(t.transform=d(e)),t}(O(O({},u),c)));var w=O(O({},c),u),x=function(n,t,e){var r=void 0===e?{}:e,i=r.onPointerEnter,a=r.onPointerLeave,o=U(n,t);return t?{onPointerEnter:function(n){null==i||i(n),o(!0)},onPointerLeave:function(n){null==a||a(n),o(!1)}}:{}}(w,l,g),P=function(n,t,e){var r=(void 0===e?{}:e).onPointerDown,i=U(n,t);if(!t)return{};var a=function(){i(!1),window.removeEventListener("pointerup",a)};return{onPointerDown:function(n){null==r||r(n),i(!0),window.addEventListener("pointerup",a)}}}(w,v,g),A=W(w,y),j=t.useRef(null);return V(j,O(O({},u),c),w,a,m,(function(n){h&&h(n),A&&A()})),t.createElement(n,Object.assign({},g,x,P,{style:b.current,ref:j}))}))}var Y=new Map,Z=new Proxy({},{get:function(n,t){return Y.has(t)||Y.set(t,X(t)),Y.get(t)}});n.animate=function(n,t,e){void 0===e&&(e={});var r={animations:[]};for(var i in t){var a=C(e,i),o=R(n,i,t[i],a);o&&r.animations.push(o)}return r.finished=Promise.all(r.animations.map((function(n){return n.finished}))),new Proxy(r,T)},n.animateValue=R,n.animated=Z,Object.defineProperty(n,"__esModule",{value:!0})}));

dist/motion.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Motion = {}));
-}(this, (function (exports) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Motion = {}, global.React));
+}(this, (function (exports, React) { 'use strict';
 
@@ -148,2 +148,14 @@ function stopAnimation(animation) {
 
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
     function __read(o, n) {
@@ -352,3 +364,2 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
             var _a, _b;
-            console.log("getting", key);
             switch (key) {
@@ -412,460 +423,239 @@ case "finished":
 
-    var invariant = function () { };
-    {
-        invariant = function (check, message) {
-            if (!check) {
-                throw new Error(message);
-            }
-        };
+    function hasChanged(a, b) {
+        if (typeof a !== typeof b)
+            return true;
+        if (Array.isArray(a) && Array.isArray(b))
+            return !shallowCompare(a, b);
+        return a !== b;
     }
-
-    var mix = function (from, to, progress) {
-        return -progress * from + progress * to + from;
-    };
-
-    var clamp = function (min, max) { return function (v) {
-        return Math.max(Math.min(v, max), min);
-    }; };
-    var sanitize = function (v) { return (v % 1 ? Number(v.toFixed(5)) : v); };
-    var floatRegex$1 = /(-)?([\d]*\.?[\d])+/g;
-    var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
-    var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
-    function isString(v) {
-        return typeof v === 'string';
-    }
-
-    var number = {
-        test: function (v) { return typeof v === 'number'; },
-        parse: parseFloat,
-        transform: function (v) { return v; },
-    };
-    var alpha = __assign(__assign({}, number), { transform: clamp(0, 1) });
-    __assign(__assign({}, number), { default: 1 });
-
-    var createUnitType = function (unit) { return ({
-        test: function (v) {
-            return isString(v) && v.endsWith(unit) && v.split(' ').length === 1;
-        },
-        parse: parseFloat,
-        transform: function (v) { return "" + v + unit; },
-    }); };
-    var percent = createUnitType('%');
-    __assign(__assign({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
-
-    var isColorString = function (type, testProp) { return function (v) {
-        return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
-            (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
-    }; };
-    var splitColor = function (aName, bName, cName) { return function (v) {
-        var _a;
-        if (!isString(v))
-            return v;
-        var _b = v.match(floatRegex$1), a = _b[0], b = _b[1], c = _b[2], alpha = _b[3];
-        return _a = {},
-            _a[aName] = parseFloat(a),
-            _a[bName] = parseFloat(b),
-            _a[cName] = parseFloat(c),
-            _a.alpha = alpha !== undefined ? parseFloat(alpha) : 1,
-            _a;
-    }; };
-
-    var hsla = {
-        test: isColorString('hsl', 'hue'),
-        parse: splitColor('hue', 'saturation', 'lightness'),
-        transform: function (_a) {
-            var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
-            return ('hsla(' +
-                Math.round(hue) +
-                ', ' +
-                percent.transform(sanitize(saturation)) +
-                ', ' +
-                percent.transform(sanitize(lightness)) +
-                ', ' +
-                sanitize(alpha.transform(alpha$1)) +
-                ')');
-        },
-    };
-
-    var clampRgbUnit = clamp(0, 255);
-    var rgbUnit = __assign(__assign({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
-    var rgba = {
-        test: isColorString('rgb', 'red'),
-        parse: splitColor('red', 'green', 'blue'),
-        transform: function (_a) {
-            var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
-            return 'rgba(' +
-                rgbUnit.transform(red) +
-                ', ' +
-                rgbUnit.transform(green) +
-                ', ' +
-                rgbUnit.transform(blue) +
-                ', ' +
-                sanitize(alpha.transform(alpha$1)) +
-                ')';
-        },
-    };
-
-    function parseHex(v) {
-        var r = '';
-        var g = '';
-        var b = '';
-        var a = '';
-        if (v.length > 5) {
-            r = v.substr(1, 2);
-            g = v.substr(3, 2);
-            b = v.substr(5, 2);
-            a = v.substr(7, 2);
+    function shallowCompare(next, prev) {
+        var prevLength = prev.length;
+        if (prevLength !== next.length)
+            return false;
+        for (var i = 0; i < prevLength; i++) {
+            if (prev[i] !== next[i])
+                return false;
         }
-        else {
-            r = v.substr(1, 1);
-            g = v.substr(2, 1);
-            b = v.substr(3, 1);
-            a = v.substr(4, 1);
-            r += r;
-            g += g;
-            b += b;
-            a += a;
-        }
-        return {
-            red: parseInt(r, 16),
-            green: parseInt(g, 16),
-            blue: parseInt(b, 16),
-            alpha: a ? parseInt(a, 16) / 255 : 1,
-        };
+        return true;
     }
-    var hex = {
-        test: isColorString('#'),
-        parse: parseHex,
-        transform: rgba.transform,
-    };
 
-    var color = {
-        test: function (v) { return rgba.test(v) || hex.test(v) || hsla.test(v); },
-        parse: function (v) {
-            if (rgba.test(v)) {
-                return rgba.parse(v);
+    function useAnimation(ref, initial, target, options, onStart, onComplete) {
+        var prevTarget = React.useRef(initial);
+        React.useEffect(function () {
+            if (!target)
+                return;
+            var targetKeyframe = {};
+            var allKeys = new Set(__spreadArray(__spreadArray([], __read(Object.keys(target)), false), __read(Object.keys(prevTarget.current)), false));
+            allKeys.forEach(function (key) {
+                var next = target[key];
+                if (!hasChanged(next, prevTarget.current[key]))
+                    return;
+                /**
+                 * TODO: If next is undefined, throw error or record a "base value"
+                 * to animate back down to
+                 */
+                targetKeyframe[key] = next;
+            });
+            if (Object.keys(targetKeyframe).length && ref.current) {
+                onStart === null || onStart === void 0 ? void 0 : onStart(targetKeyframe);
+                var animations = [];
+                for (var key in targetKeyframe) {
+                    var animation = animateValue(ref.current, key, targetKeyframe[key], options);
+                    animation && animations.push(animation);
+                }
+                Promise.all(animations.map(function (animation) { return animation.finished; }))
+                    .then(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(targetKeyframe); })
+                    .catch(noop);
             }
-            else if (hsla.test(v)) {
-                return hsla.parse(v);
-            }
-            else {
-                return hex.parse(v);
-            }
-        },
-        transform: function (v) {
-            return isString(v)
-                ? v
-                : v.hasOwnProperty('red')
-                    ? rgba.transform(v)
-                    : hsla.transform(v);
-        },
-    };
+            prevTarget.current = target;
+        });
+    }
 
-    var colorToken = '${c}';
-    var numberToken = '${n}';
-    function test(v) {
-        var _a, _b, _c, _d;
-        return (isNaN(v) &&
-            isString(v) &&
-            ((_b = (_a = v.match(floatRegex$1)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0);
+    function useGestureState(target, stylesToApply) {
+        var _a = __read(React.useState(false), 2), isGestureActive = _a[0], setGestureState = _a[1];
+        if (isGestureActive)
+            Object.assign(target, stylesToApply);
+        return setGestureState;
     }
-    function analyse$1(v) {
-        var values = [];
-        var numColors = 0;
-        var colors = v.match(colorRegex);
-        if (colors) {
-            numColors = colors.length;
-            v = v.replace(colorRegex, colorToken);
-            values.push.apply(values, colors.map(color.parse));
-        }
-        var numbers = v.match(floatRegex$1);
-        if (numbers) {
-            v = v.replace(floatRegex$1, numberToken);
-            values.push.apply(values, numbers.map(number.parse));
-        }
-        return { values: values, numColors: numColors, tokenised: v };
-    }
-    function parse(v) {
-        return analyse$1(v).values;
-    }
-    function createTransformer(v) {
-        var _a = analyse$1(v), values = _a.values, numColors = _a.numColors, tokenised = _a.tokenised;
-        var numValues = values.length;
-        return function (v) {
-            var output = tokenised;
-            for (var i = 0; i < numValues; i++) {
-                output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v[i]) : sanitize(v[i]));
+
+    function useHover(target, stylesToApply, _a) {
+        var _b = _a === void 0 ? {} : _a, onPointerEnter = _b.onPointerEnter, onPointerLeave = _b.onPointerLeave;
+        var setGestureState = useGestureState(target, stylesToApply);
+        return stylesToApply
+            ? {
+                onPointerEnter: function (e) {
+                    onPointerEnter === null || onPointerEnter === void 0 ? void 0 : onPointerEnter(e);
+                    setGestureState(true);
+                },
+                onPointerLeave: function (e) {
+                    onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(e);
+                    setGestureState(false);
+                },
             }
-            return output;
-        };
+            : {};
     }
-    var convertNumbersToZero = function (v) {
-        return typeof v === 'number' ? 0 : v;
-    };
-    function getAnimatableNone(v) {
-        var parsed = parse(v);
-        var transformer = createTransformer(v);
-        return transformer(parsed.map(convertNumbersToZero));
-    }
-    var complex = { test: test, parse: parse, createTransformer: createTransformer, getAnimatableNone: getAnimatableNone };
 
-    var mixLinearColor = function (from, to, v) {
-        var fromExpo = from * from;
-        var toExpo = to * to;
-        return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));
-    };
-    var colorTypes = [hex, rgba, hsla];
-    var getColorType = function (v) {
-        return colorTypes.find(function (type) { return type.test(v); });
-    };
-    var notAnimatable = function (color) {
-        return "'" + color + "' is not an animatable color. Use the equivalent color code instead.";
-    };
-    var mixColor = function (from, to) {
-        var fromColorType = getColorType(from);
-        var toColorType = getColorType(to);
-        invariant(!!fromColorType, notAnimatable(from));
-        invariant(!!toColorType, notAnimatable(to));
-        invariant(fromColorType.transform === toColorType.transform, "Both colors must be hex/RGBA, OR both must be HSLA.");
-        var fromColor = fromColorType.parse(from);
-        var toColor = toColorType.parse(to);
-        var blended = __assign({}, fromColor);
-        var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
-        return function (v) {
-            for (var key in blended) {
-                if (key !== "alpha") {
-                    blended[key] = mixFunc(fromColor[key], toColor[key], v);
-                }
-            }
-            blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
-            return fromColorType.transform(blended);
+    function usePress(target, stylesToApply, _a) {
+        var _b = _a === void 0 ? {} : _a, onPointerDown = _b.onPointerDown;
+        var setGestureState = useGestureState(target, stylesToApply);
+        if (!stylesToApply)
+            return {};
+        var onPointerUp = function () {
+            setGestureState(false);
+            window.removeEventListener("pointerup", onPointerUp);
         };
-    };
+        return {
+            onPointerDown: function (e) {
+                onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(e);
+                setGestureState(true);
+                window.addEventListener("pointerup", onPointerUp);
+            },
+        };
+    }
 
-    var isNum = function (v) { return typeof v === 'number'; };
+    /**
+     * @public
+     */
+    var PresenceContext = React.createContext(null);
 
-    var combineFunctions = function (a, b) { return function (v) { return b(a(v)); }; };
-    var pipe = function () {
-        var transformers = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            transformers[_i] = arguments[_i];
+    /**
+     * Creates a constant value over the lifecycle of a component.
+     *
+     * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
+     * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
+     * you can ensure that initialisers don't execute twice or more.
+     */
+    function useConstant(init) {
+        var ref = React.useRef(null);
+        if (ref.current === null) {
+            ref.current = init();
         }
-        return transformers.reduce(combineFunctions);
-    };
-
-    function getMixer(origin, target) {
-        if (isNum(origin)) {
-            return function (v) { return mix(origin, target, v); };
-        }
-        else if (color.test(origin)) {
-            return mixColor(origin, target);
-        }
-        else {
-            return mixComplex(origin, target);
-        }
+        return ref.current;
     }
-    var mixArray = function (from, to) {
-        var output = __spreadArray([], from);
-        var numValues = output.length;
-        var blendValue = from.map(function (fromThis, i) { return getMixer(fromThis, to[i]); });
-        return function (v) {
-            for (var i = 0; i < numValues; i++) {
-                output[i] = blendValue[i](v);
-            }
-            return output;
-        };
-    };
-    function analyse(value) {
-        var parsed = complex.parse(value);
-        var numValues = parsed.length;
-        var numNumbers = 0;
-        var numRGB = 0;
-        var numHSL = 0;
-        for (var i = 0; i < numValues; i++) {
-            if (numNumbers || typeof parsed[i] === "number") {
-                numNumbers++;
-            }
-            else {
-                if (parsed[i].hue !== undefined) {
-                    numHSL++;
-                }
-                else {
-                    numRGB++;
-                }
-            }
-        }
-        return { parsed: parsed, numNumbers: numNumbers, numRGB: numRGB, numHSL: numHSL };
-    }
-    var mixComplex = function (origin, target) {
-        var template = complex.createTransformer(target);
-        var originStats = analyse(origin);
-        var targetStats = analyse(target);
-        invariant(originStats.numHSL === targetStats.numHSL &&
-            originStats.numRGB === targetStats.numRGB &&
-            originStats.numNumbers >= targetStats.numNumbers, "Complex values '" + origin + "' and '" + target + "' too different to mix. Ensure all colors are of the same type.");
-        return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
-    };
 
-    function velocityPerSecond(velocity, frameDuration) {
-        return frameDuration ? velocity * (1000 / frameDuration) : 0;
+    /**
+     * When a component is the child of `AnimatePresence`, it can use `usePresence`
+     * to access information about whether it's still present in the React tree.
+     *
+     * ```jsx
+     * import { usePresence } from "framer-motion"
+     *
+     * export const Component = () => {
+     *   const [isPresent, safeToRemove] = usePresence()
+     *
+     *   useEffect(() => {
+     *     !isPresent && setTimeout(safeToRemove, 1000)
+     *   }, [isPresent])
+     *
+     *   return <div />
+     * }
+     * ```
+     *
+     * If `isPresent` is `false`, it means that a component has been removed the tree, but
+     * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
+     *
+     * @public
+     */
+    function usePresence() {
+        var context = React.useContext(PresenceContext);
+        if (context === null)
+            return [true, null];
+        var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;
+        // It's safe to call the following hooks conditionally (after an early return) because the context will always
+        // either be null or non-null for the lifespan of the component.
+        // Replace with useOpaqueId when released in React
+        var id = useUniqueId();
+        React.useEffect(function () { return register(id); }, []);
+        var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
+        return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
     }
+    var counter = 0;
+    var incrementId = function () { return counter++; };
+    var useUniqueId = function () { return useConstant(incrementId); };
 
-    var floatRegex = /(-)?([\d]*\.?[\d])+/g;
-    function parseNumberString(value) {
-        if (typeof value === "string" && parseFloat(value).toString() === value) {
-            return parseFloat(value);
+    function useExit(target, stylesToApply) {
+        var _a = __read(usePresence(), 2), isPresent = _a[0], onExitComplete = _a[1];
+        /**
+         * In case we don't have an exit animation defined we still need to
+         * call onExitComplete if it exists so AnimatePresence knows it
+         * can remove this component.
+         */
+        React.useEffect(function () {
+            if (!stylesToApply)
+                onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
+        }, [isPresent]);
+        if (stylesToApply && !isPresent) {
+            Object.assign(target, stylesToApply);
+            return onExitComplete;
         }
-        return value;
     }
-    var getUnit = function (v) { return v.replace(floatRegex, ""); };
-    function makeAnimatable(from, to) {
-        from = parseNumberString(from);
-        to = parseNumberString(to);
-        // If both numbers, animate
-        if (typeof from === "number" && typeof to === "number")
-            return { from: from, to: to };
-        // If one is a number and the other is a unit type
-        if (typeof from === "number" &&
-            typeof to !== "number" &&
-            !isNaN(parseFloat(to))) {
-            var unit_1 = getUnit(to);
-            return { from: from, to: parseFloat(to), toValueType: function (v) { return v + unit_1; } };
+
+    function convertKeyframesToStyles(keyframes) {
+        var initialKeyframes = {};
+        var transformKeys = [];
+        for (var key in keyframes) {
+            var value = keyframes[key];
+            if (isTransform(key)) {
+                if (transformAlias[key])
+                    key = transformAlias[key];
+                transformKeys.push(key);
+                key = asTransformCssVar(key);
+            }
+            var initialKeyframe = Array.isArray(value) ? value[0] : value;
+            /**
+             * If this is a number and we have a default value type, convert the number
+             * to this type.
+             */
+            var definition = transformPropertyDefinitions.get(key);
+            if (definition && definition.toDefaultUnit) {
+                initialKeyframe =
+                    typeof value === "number" ? definition.toDefaultUnit(value) : value;
+            }
+            initialKeyframes[key] = initialKeyframe;
         }
-        else if (typeof from === "string") {
-            var mixer_1 = mixComplex(from, to);
-            return {
-                from: 0,
-                to: 100,
-                toValueType: function (v) { return mixer_1(v / 100); },
-            };
+        if (transformKeys.length) {
+            initialKeyframes.transform = buildTransformTemplate(transformKeys);
         }
-        return false;
+        return initialKeyframes;
     }
 
-    var defaultStiffness = 100.0;
-    var defaultDamping = 10.0;
-    var defaultMass = 1.0;
-    var calcDampingRatio = function (stiffness, damping, mass) {
-        if (stiffness === void 0) { stiffness = defaultStiffness; }
-        if (damping === void 0) { damping = defaultDamping; }
-        if (mass === void 0) { mass = defaultMass; }
-        return damping / (2 * Math.sqrt(stiffness * mass));
-    };
-    var calcAngularFreq = function (undampedFreq, dampingRatio) {
-        return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
-    };
-    var createSpringGenerator = function (_a) {
-        var _b = _a === void 0 ? {} : _a, _c = _b.stiffness, stiffness = _c === void 0 ? defaultStiffness : _c, _d = _b.damping, damping = _d === void 0 ? 10.0 : _d, _e = _b.mass, mass = _e === void 0 ? 1.0 : _e, _f = _b.from, from = _f === void 0 ? 0 : _f, _g = _b.to, to = _g === void 0 ? 1 : _g, _h = _b.velocity, velocity = _h === void 0 ? 0.0 : _h, _j = _b.restSpeed, restSpeed = _j === void 0 ? 2 : _j, _k = _b.restDelta, restDelta = _k === void 0 ? 0.1 : _k;
-        velocity = velocity ? -(velocity / 1000) : 0.0;
-        var dampingRatio = calcDampingRatio(stiffness, damping, mass);
-        var initialDelta = to - from;
-        var undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
-        var angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
-        var state = {
-            done: false,
-            value: from,
-            velocity: velocity,
-        };
-        var resolveSpring;
-        if (dampingRatio < 1) {
-            // Underdamped spring (bouncy)
-            resolveSpring = function (t) {
-                return to -
-                    Math.exp(-dampingRatio * undampedAngularFreq * t) *
-                        (((-velocity + dampingRatio * undampedAngularFreq * initialDelta) /
-                            angularFreq) *
-                            Math.sin(angularFreq * t) +
-                            initialDelta * Math.cos(angularFreq * t));
-            };
+    function createAnimatedComponent(Component) {
+        function Animated(_a, _externalRef) {
+            var _b = _a.options, options = _b === void 0 ? {} : _b, style = _a.style, initial = _a.initial, hover = _a.hover, press = _a.press, exit = _a.exit, onStart = _a.onStart, onComplete = _a.onComplete, props = __rest(_a, ["options", "style", "initial", "hover", "press", "exit", "onStart", "onComplete"]);
+            /**
+             * We only ever pass the initally-provided styles to React, animating
+             * further updates ourselves.
+             */
+            var renderedStyle = React.useRef(null);
+            renderedStyle.current || (renderedStyle.current = convertKeyframesToStyles(__assign(__assign({}, style), initial)));
+            var target = __assign(__assign({}, initial), style);
+            var hoverProps = useHover(target, hover, props);
+            var pressProps = usePress(target, press, props);
+            var onExitComplete = useExit(target, exit);
+            var ref = React.useRef(null);
+            useAnimation(ref, __assign(__assign({}, style), initial), target, options, onStart, function (animation) {
+                onComplete && onComplete(animation);
+                onExitComplete && onExitComplete();
+            });
+            return React.createElement(Component, Object.assign({}, props, hoverProps, pressProps, {
+                style: renderedStyle.current,
+                ref: ref,
+            }));
         }
-        else {
-            // Critically damped spring
-            resolveSpring = function (t) {
-                return to -
-                    Math.exp(-undampedAngularFreq * t) *
-                        (initialDelta + (velocity + undampedAngularFreq * initialDelta) * t);
-            };
-        }
-        return {
-            next: function (t) {
-                state.value = resolveSpring(t);
-                state.velocity =
-                    t === 0 ? velocity : calcVelocity(resolveSpring, t, state.value);
-                var isBelowVelocityThreshold = Math.abs(state.velocity) <= restSpeed;
-                var isBelowDisplacementThreshold = Math.abs(to - state.value) <= restDelta;
-                state.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;
-                return state;
-            },
-        };
-    };
-    var sampleT = 5; // ms
-    function calcVelocity(resolveValue, t, current) {
-        var prevT = Math.max(t - sampleT, 0);
-        return velocityPerSecond(current - resolveValue(prevT), 5);
+        return React.forwardRef(Animated);
     }
 
-    /**
-     * The resolution of pregenerated keyframes in milliseconds
-     */
-    var pregenerationResolution = 10;
-    /**
-     * The max number of pregenerated keyframes. With pregenerationResolution this
-     * gives us a maximum duration of two seconds.
-     *
-     * It could be possible to remove this limit if we polyfill some repeat
-     * logic and generate a new set of keyframes each iteration.
-     *
-     * Alternatively, because individual keyframes (being CSS variables) run
-     * on the main thread, it could also be possible simple to run these
-     * animations synchronously.
-     */
-    var maxPregeneratedKeyframes = 200;
-    var spring = function (stiffness, damping, mass, velocity) {
-        if (stiffness === void 0) { stiffness = 200; }
-        if (damping === void 0) { damping = 15; }
-        if (mass === void 0) { mass = 1; }
-        return ({
-            isAnimationGenerator: true,
-            generate: function (definition) {
-                var _a;
-                if (definition.length > 2)
-                    return false;
-                var keyframes = [];
-                var animatable = makeAnimatable(definition.length === 1 ? 0 : definition[0], (_a = definition[1]) !== null && _a !== void 0 ? _a : definition[0]);
-                if (animatable === false)
-                    return false;
-                var from = animatable.from, to = animatable.to, toValueType = animatable.toValueType;
-                var generator = createSpringGenerator({
-                    stiffness: stiffness,
-                    damping: damping,
-                    mass: mass,
-                    velocity: velocity,
-                    from: from,
-                    to: to,
-                });
-                var isComplete = false;
-                var numPregeneratedKeyframes = 0;
-                var t = 0;
-                while (!isComplete) {
-                    numPregeneratedKeyframes++;
-                    var _b = generator.next(t), value = _b.value, done = _b.done;
-                    keyframes.push(toValueType ? toValueType(value) : value);
-                    t += pregenerationResolution;
-                    if (numPregeneratedKeyframes > maxPregeneratedKeyframes) {
-                        // TODO Warn in development mode
-                        isComplete = true;
-                    }
-                    else {
-                        isComplete = done;
-                    }
-                }
-                // TODO Return generator or set to element
-                return { keyframes: keyframes, duration: t };
-            },
-        });
-    };
+    var components = new Map();
+    var animated = new Proxy({}, {
+        get: function (_, key) {
+            if (!components.has(key)) {
+                components.set(key, createAnimatedComponent(key));
+            }
+            return components.get(key);
+        },
+    });
 
     exports.animate = animate;
     exports.animateValue = animateValue;
-    exports.spring = spring;
+    exports.animated = animated;
 
@@ -872,0 +662,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/size-animate-dom.js

@@ -1,1 +0,1 @@
-import{__read as t,__assign as n}from"tslib";function e(t){t.commitStyles(),t.cancel()}var r=new WeakMap;function i(t){return r.has(t)||r.set(t,{activeTransforms:[],activeAnimations:{}}),r.get(t)}var a=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},u={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(t){return t+"deg"}},s={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(t){return t+"px"}},rotate:u,scale:{syntax:"<number>",initialValue:1},skew:u},c=new Map,f=function(t){return"--motion-"+t},l=["x","y","z"];function y(t,n){return l.indexOf(t)-l.indexOf(n)}["translate","scale","rotate","skew"].forEach((function(t){a.forEach((function(n){l.push(t+n),c.set(f(t+n),s[t])}))}));var m=new Set(l),v=function(t){return t.sort(y).reduce(d,"").trim()},d=function(t,n){return t+" "+n+"(var("+f(n)+"))"},p=function(t){return t.startsWith("--")},h=new Set;var g=function(){},x=function(t){return 1e3*t},b=function(t){return Array.isArray(t)&&"number"!=typeof t[0]},w=function(t){return function(t){return Array.isArray(t)&&"number"==typeof t[0]}(t)?A(t):t},A=function(n){var e=t(n,4);return"cubic-bezier("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")"};var P={cssRegisterProperty:function(){return"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty")},waapi:function(){return Object.hasOwnProperty.call(Element.prototype,"animate")},partialKeyframes:function(){try{document.createElement("div").animate({opacity:[1]},{duration:.001})}catch(t){return!1}return!0}},S={},O=Object.keys(P).reduce((function(t,n){return t[n]=function(){return void 0===S[n]&&(S[n]=P[n]()),S[n]},t}),{});function k(t,n,r,a){var u,s=void 0===a?{}:a,l=s.duration,y=void 0===l?.3:l,d=s.delay,A=void 0===d?0:d,P=s.endDelay,S=void 0===P?0:P,k=s.repeat,D=void 0===k?0:k,E=s.easing,V=void 0===E?"ease":E,T=s.direction,j=s.offset,C=i(t),R=!0,U=g;if(r=Array.isArray(r)?r:[r],function(t){return m.has(t)}(n)&&(o[n]&&(n=o[n]),function(t,n){var e,r,a=i(t).activeTransforms;r=n,-1===(e=a).indexOf(r)&&e.push(r),t.style.transform=v(a)}(t,n),n=f(n)),function(t,n){t.activeAnimations[n]&&(e(t.activeAnimations[n]),t.activeAnimations[n]=void 0)}(C,n),function(t){return"object"==typeof t&&t.isAnimationGenerator}(V)){var z=V.generate(r);V="linear",!1!==z&&(r=z.keyframes,y=z.duration)}var K=c.get(n);K&&K.toDefaultUnit&&(r=r.map((function(t){return"number"==typeof t?K.toDefaultUnit(t):t})));var M=r[r.length-1];if(p(n)?(U=function(){t.style.setProperty(n,M)},O.cssRegisterProperty()?function(t){if(!h.has(t)){h.add(t);try{var n=c.has(t)?c.get(t):{},e=n.syntax,r=n.initialValue;CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:r})}catch(t){}}}(n):R=!1):U=function(){t.style[n]=M},O.waapi()&&R){if(!O.partialKeyframes()&&1===r.length){var W=p(n)?t.style.getPropertyValue(n):getComputedStyle(t)[n];r.unshift(W)}var X=t.animate(((u={})[n]=r,u.offset=j,u.easing=b(V)?function(t){return t.map(w)}(V):void 0,u),{delay:x(A),duration:x(y),endDelay:x(S),easing:b(V)?void 0:w(V),direction:T,iterations:D+1});return C.activeAnimations[n]=X,X.finished.then(U).catch(g),X}U()}var D=function(t,e){return t[e]?n(n({},t),t[e]):t};function E(t,n,e){void 0===e&&(e={});var r={animations:[]};for(var i in n){var a=D(e,i),o=k(t,i,n[i],a);o&&r.animations.push(o)}return r.finished=Promise.all(r.animations.map((function(t){return t.finished}))),new Proxy(r,V)}var V={get:function(t,n){var r,i;switch(console.log("getting",n),n){case"finished":return t.finished;case"currentTime":var a=(null===(r=t.animations[0])||void 0===r?void 0:r[n])||0;return a?a/1e3:0;case"playbackRate":return null===(i=t.animations[0])||void 0===i?void 0:i[n];case"stop":return function(){return t.animations.forEach(e)};default:return function(){return t.animations.forEach((function(t){return t[n]()}))}}},set:function(t,n,e){switch(n){case"currentTime":e*=1e3;case"currentTime":case"playbackRate":for(var r=0;r<t.animations.length;r++)t.animations[r][n]=e;return!0}return!1}};export{E as animate};
+import{__read as t,__assign as n}from"tslib";function e(t){t.commitStyles(),t.cancel()}var r=new WeakMap;function i(t){return r.has(t)||r.set(t,{activeTransforms:[],activeAnimations:{}}),r.get(t)}var a=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},u={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(t){return t+"deg"}},s={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(t){return t+"px"}},rotate:u,scale:{syntax:"<number>",initialValue:1},skew:u},c=new Map,f=function(t){return"--motion-"+t},l=["x","y","z"];function y(t,n){return l.indexOf(t)-l.indexOf(n)}["translate","scale","rotate","skew"].forEach((function(t){a.forEach((function(n){l.push(t+n),c.set(f(t+n),s[t])}))}));var m=new Set(l),v=function(t){return t.sort(y).reduce(d,"").trim()},d=function(t,n){return t+" "+n+"(var("+f(n)+"))"},p=function(t){return t.startsWith("--")},h=new Set;var g=function(){},x=function(t){return 1e3*t},b=function(t){return Array.isArray(t)&&"number"!=typeof t[0]},w=function(t){return function(t){return Array.isArray(t)&&"number"==typeof t[0]}(t)?A(t):t},A=function(n){var e=t(n,4);return"cubic-bezier("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")"};var P={cssRegisterProperty:function(){return"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty")},waapi:function(){return Object.hasOwnProperty.call(Element.prototype,"animate")},partialKeyframes:function(){try{document.createElement("div").animate({opacity:[1]},{duration:.001})}catch(t){return!1}return!0}},S={},O=Object.keys(P).reduce((function(t,n){return t[n]=function(){return void 0===S[n]&&(S[n]=P[n]()),S[n]},t}),{});function k(t,n,r,a){var u,s=void 0===a?{}:a,l=s.duration,y=void 0===l?.3:l,d=s.delay,A=void 0===d?0:d,P=s.endDelay,S=void 0===P?0:P,k=s.repeat,D=void 0===k?0:k,E=s.easing,V=void 0===E?"ease":E,T=s.direction,j=s.offset,C=i(t),R=!0,U=g;if(r=Array.isArray(r)?r:[r],function(t){return m.has(t)}(n)&&(o[n]&&(n=o[n]),function(t,n){var e,r,a=i(t).activeTransforms;r=n,-1===(e=a).indexOf(r)&&e.push(r),t.style.transform=v(a)}(t,n),n=f(n)),function(t,n){t.activeAnimations[n]&&(e(t.activeAnimations[n]),t.activeAnimations[n]=void 0)}(C,n),function(t){return"object"==typeof t&&t.isAnimationGenerator}(V)){var z=V.generate(r);V="linear",!1!==z&&(r=z.keyframes,y=z.duration)}var K=c.get(n);K&&K.toDefaultUnit&&(r=r.map((function(t){return"number"==typeof t?K.toDefaultUnit(t):t})));var M=r[r.length-1];if(p(n)?(U=function(){t.style.setProperty(n,M)},O.cssRegisterProperty()?function(t){if(!h.has(t)){h.add(t);try{var n=c.has(t)?c.get(t):{},e=n.syntax,r=n.initialValue;CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:r})}catch(t){}}}(n):R=!1):U=function(){t.style[n]=M},O.waapi()&&R){if(!O.partialKeyframes()&&1===r.length){var W=p(n)?t.style.getPropertyValue(n):getComputedStyle(t)[n];r.unshift(W)}var X=t.animate(((u={})[n]=r,u.offset=j,u.easing=b(V)?function(t){return t.map(w)}(V):void 0,u),{delay:x(A),duration:x(y),endDelay:x(S),easing:b(V)?void 0:w(V),direction:T,iterations:D+1});return C.activeAnimations[n]=X,X.finished.then(U).catch(g),X}U()}var D=function(t,e){return t[e]?n(n({},t),t[e]):t};function E(t,n,e){void 0===e&&(e={});var r={animations:[]};for(var i in n){var a=D(e,i),o=k(t,i,n[i],a);o&&r.animations.push(o)}return r.finished=Promise.all(r.animations.map((function(t){return t.finished}))),new Proxy(r,V)}var V={get:function(t,n){var r,i;switch(n){case"finished":return t.finished;case"currentTime":var a=(null===(r=t.animations[0])||void 0===r?void 0:r[n])||0;return a?a/1e3:0;case"playbackRate":return null===(i=t.animations[0])||void 0===i?void 0:i[n];case"stop":return function(){return t.animations.forEach(e)};default:return function(){return t.animations.forEach((function(t){return t[n]()}))}}},set:function(t,n,e){switch(n){case"currentTime":e*=1e3;case"currentTime":case"playbackRate":for(var r=0;r<t.animations.length;r++)t.animations[r][n]=e;return!0}return!1}};export{E as animate};

package.json

 {
   "name": "motion",
-  "version": "6.0.1-alpha.21",
+  "version": "6.0.1-alpha.23",
   "description": "The Motion library for the web",
@@ -5,0 +5,0 @@ "author": "Matt Perry",

src/index.ts

 export { animate } from "./targets/dom/animate"
 export { animateValue } from "./targets/dom/animate-value"
-export { spring } from "./generators/spring"
-// export { animated } from "./targets/react/index"
+export { animated } from "./targets/react/index"
 
-// TODO: Only export types, get rid of element lists
 export * from "./targets/dom/types"
 export * from "./targets/react/types"

src/targets/dom/animate.ts

@@ -40,3 +40,2 @@ import {
   get: (target: AnimationState, key: string) => {
-    console.log("getting", key)
     switch (key) {
@@ -43,0 +42,0 @@ case "finished":

types/index.d.ts

 export { animate } from "./targets/dom/animate";
 export { animateValue } from "./targets/dom/animate-value";
-export { spring } from "./generators/spring";
+export { animated } from "./targets/react/index";
 export * from "./targets/dom/types";
 export * from "./targets/react/types";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

110

increased by5.77%

Worsened metrics

Total package byte prevSize

268745

decreased by-3.25%

Lines of code

7108

decreased by-2.38%

Number of low quality alerts

3

increased by50%

No dependency changes