framer-motion 7.7.3 → 7.8.1

package/dist/projection.dev.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
   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.Projection = {}, global.react));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Projection = {}, global.React));
 })(this, (function (exports, react) { 'use strict';
 
   /*
@@ -161,531 +161,110 @@
           onNextFrame(processFrame);
   };
 
-  function addUniqueItem(arr, item) {
-      if (arr.indexOf(item) === -1)
-          arr.push(item);
+  var warning = function () { };
+  var invariant = function () { };
+  {
+      warning = function (check, message) {
+          if (!check && typeof console !== 'undefined') {
+              console.warn(message);
+          }
+      };
+      invariant = function (check, message) {
+          if (!check) {
+              throw new Error(message);
+          }
+      };
   }
-  function removeItem(arr, item) {
-      const index = arr.indexOf(item);
-      if (index > -1)
-          arr.splice(index, 1);
+
+  /**
+   * Converts seconds to milliseconds
+   *
+   * @param seconds - Time in seconds.
+   * @return milliseconds - Converted time in milliseconds.
+   */
+  const secondsToMilliseconds = (seconds) => seconds * 1000;
+
+  const instantAnimationState = {
+      current: false,
+  };
+
+  /**
+   *
+   */
+  function createAcceleratedAnimation() {
+      return () => { };
   }
 
-  class SubscriptionManager {
-      constructor() {
-          this.subscriptions = [];
-      }
-      add(handler) {
-          addUniqueItem(this.subscriptions, handler);
-          return () => removeItem(this.subscriptions, handler);
-      }
-      notify(a, b, c) {
-          const numSubscriptions = this.subscriptions.length;
-          if (!numSubscriptions)
-              return;
-          if (numSubscriptions === 1) {
-              /**
-               * If there's only a single handler we can just call it without invoking a loop.
-               */
-              this.subscriptions[0](a, b, c);
-          }
-          else {
-              for (let i = 0; i < numSubscriptions; i++) {
-                  /**
-                   * Check whether the handler exists before firing as it's possible
-                   * the subscriptions were modified during this loop running.
-                   */
-                  const handler = this.subscriptions[i];
-                  handler && handler(a, b, c);
-              }
+  /**
+   * Timeout defined in ms
+   */
+  function delay(callback, timeout) {
+      const start = performance.now();
+      const checkElapsed = ({ timestamp }) => {
+          const elapsed = timestamp - start;
+          if (elapsed >= timeout) {
+              cancelSync.read(checkElapsed);
+              callback(elapsed - timeout);
           }
-      }
-      getSize() {
-          return this.subscriptions.length;
-      }
-      clear() {
-          this.subscriptions.length = 0;
-      }
+      };
+      sync.read(checkElapsed, true);
+      return () => cancelSync.read(checkElapsed);
   }
 
-  /*
-    Convert velocity into velocity per second
+  function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
+      const setValue = () => {
+          onUpdate && onUpdate(keyframes[keyframes.length - 1]);
+          onComplete && onComplete();
+          return () => { };
+      };
+      return elapsed ? delay(setValue, -elapsed) : setValue();
+  }
 
-    @param [number]: Unit per frame
-    @param [number]: Frame duration in ms
-  */
-  function velocityPerSecond(velocity, frameDuration) {
-      return frameDuration ? velocity * (1000 / frameDuration) : 0;
+  // Accepts an easing function and returns a new one that outputs mirrored values for
+  // the second half of the animation. Turns easeIn into easeInOut.
+  const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
+
+  // Accepts an easing function and returns a new one that outputs reversed values.
+  // Turns easeIn into easeOut.
+  const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+
+  const easeIn = (p) => p * p;
+  const easeOut = reverseEasing(easeIn);
+  const easeInOut = mirrorEasing(easeIn);
+
+  /**
+   * TODO: When we move from string as a source of truth to data models
+   * everything in this folder should probably be referred to as models vs types
+   */
+  // If this number is a decimal, make it just five decimal places
+  // to avoid exponents
+  const sanitize = (v) => Math.round(v * 100000) / 100000;
+  const floatRegex = /(-)?([\d]*\.?[\d])+/g;
+  const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
+  const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
+  function isString(v) {
+      return typeof v === "string";
   }
 
-  const isFloat = (value) => {
-      return !isNaN(parseFloat(value));
+  const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+
+  const number = {
+      test: (v) => typeof v === "number",
+      parse: parseFloat,
+      transform: (v) => v,
+  };
+  const alpha = {
+      ...number,
+      transform: (v) => clamp(0, 1, v),
   };
+  const scale = {
+      ...number,
+      default: 1,
+  };
+
   /**
-   * `MotionValue` is used to track the state and velocity of motion values.
-   *
-   * @public
-   */
-  class MotionValue {
-      /**
-       * @param init - The initiating value
-       * @param config - Optional configuration options
-       *
-       * -  `transformer`: A function to transform incoming values with.
-       *
-       * @internal
-       */
-      constructor(init) {
-          /**
-           * This will be replaced by the build step with the latest version number.
-           * When MotionValues are provided to motion components, warn if versions are mixed.
-           */
-          this.version = "7.7.3";
-          /**
-           * Duration, in milliseconds, since last updating frame.
-           *
-           * @internal
-           */
-          this.timeDelta = 0;
-          /**
-           * Timestamp of the last time this `MotionValue` was updated.
-           *
-           * @internal
-           */
-          this.lastUpdated = 0;
-          /**
-           * Functions to notify when the `MotionValue` updates.
-           *
-           * @internal
-           */
-          this.updateSubscribers = new SubscriptionManager();
-          /**
-           * Functions to notify when the velocity updates.
-           *
-           * @internal
-           */
-          this.velocityUpdateSubscribers = new SubscriptionManager();
-          /**
-           * Functions to notify when the `MotionValue` updates and `render` is set to `true`.
-           *
-           * @internal
-           */
-          this.renderSubscribers = new SubscriptionManager();
-          /**
-           * Tracks whether this value can output a velocity. Currently this is only true
-           * if the value is numerical, but we might be able to widen the scope here and support
-           * other value types.
-           *
-           * @internal
-           */
-          this.canTrackVelocity = false;
-          this.updateAndNotify = (v, render = true) => {
-              this.prev = this.current;
-              this.current = v;
-              // Update timestamp
-              const { delta, timestamp } = frameData;
-              if (this.lastUpdated !== timestamp) {
-                  this.timeDelta = delta;
-                  this.lastUpdated = timestamp;
-                  sync.postRender(this.scheduleVelocityCheck);
-              }
-              // Update update subscribers
-              if (this.prev !== this.current) {
-                  this.updateSubscribers.notify(this.current);
-              }
-              // Update velocity subscribers
-              if (this.velocityUpdateSubscribers.getSize()) {
-                  this.velocityUpdateSubscribers.notify(this.getVelocity());
-              }
-              // Update render subscribers
-              if (render) {
-                  this.renderSubscribers.notify(this.current);
-              }
-          };
-          /**
-           * Schedule a velocity check for the next frame.
-           *
-           * This is an instanced and bound function to prevent generating a new
-           * function once per frame.
-           *
-           * @internal
-           */
-          this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck);
-          /**
-           * Updates `prev` with `current` if the value hasn't been updated this frame.
-           * This ensures velocity calculations return `0`.
-           *
-           * This is an instanced and bound function to prevent generating a new
-           * function once per frame.
-           *
-           * @internal
-           */
-          this.velocityCheck = ({ timestamp }) => {
-              if (timestamp !== this.lastUpdated) {
-                  this.prev = this.current;
-                  this.velocityUpdateSubscribers.notify(this.getVelocity());
-              }
-          };
-          this.hasAnimated = false;
-          this.prev = this.current = init;
-          this.canTrackVelocity = isFloat(this.current);
-      }
-      /**
-       * Adds a function that will be notified when the `MotionValue` is updated.
-       *
-       * It returns a function that, when called, will cancel the subscription.
-       *
-       * When calling `onChange` inside a React component, it should be wrapped with the
-       * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-       * from the `useEffect` function to ensure you don't add duplicate subscribers..
-       *
-       * ```jsx
-       * export const MyComponent = () => {
-       *   const x = useMotionValue(0)
-       *   const y = useMotionValue(0)
-       *   const opacity = useMotionValue(1)
-       *
-       *   useEffect(() => {
-       *     function updateOpacity() {
-       *       const maxXY = Math.max(x.get(), y.get())
-       *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-       *       opacity.set(newOpacity)
-       *     }
-       *
-       *     const unsubscribeX = x.onChange(updateOpacity)
-       *     const unsubscribeY = y.onChange(updateOpacity)
-       *
-       *     return () => {
-       *       unsubscribeX()
-       *       unsubscribeY()
-       *     }
-       *   }, [])
-       *
-       *   return <motion.div style={{ x }} />
-       * }
-       * ```
-       *
-       * @privateRemarks
-       *
-       * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
-       *
-       * ```jsx
-       * useOnChange(x, () => {})
-       * ```
-       *
-       * @param subscriber - A function that receives the latest value.
-       * @returns A function that, when called, will cancel this subscription.
-       *
-       * @public
-       */
-      onChange(subscription) {
-          return this.updateSubscribers.add(subscription);
-      }
-      clearListeners() {
-          this.updateSubscribers.clear();
-      }
-      /**
-       * Adds a function that will be notified when the `MotionValue` requests a render.
-       *
-       * @param subscriber - A function that's provided the latest value.
-       * @returns A function that, when called, will cancel this subscription.
-       *
-       * @internal
-       */
-      onRenderRequest(subscription) {
-          // Render immediately
-          subscription(this.get());
-          return this.renderSubscribers.add(subscription);
-      }
-      /**
-       * Attaches a passive effect to the `MotionValue`.
-       *
-       * @internal
-       */
-      attach(passiveEffect) {
-          this.passiveEffect = passiveEffect;
-      }
-      /**
-       * Sets the state of the `MotionValue`.
-       *
-       * @remarks
-       *
-       * ```jsx
-       * const x = useMotionValue(0)
-       * x.set(10)
-       * ```
-       *
-       * @param latest - Latest value to set.
-       * @param render - Whether to notify render subscribers. Defaults to `true`
-       *
-       * @public
-       */
-      set(v, render = true) {
-          if (!render || !this.passiveEffect) {
-              this.updateAndNotify(v, render);
-          }
-          else {
-              this.passiveEffect(v, this.updateAndNotify);
-          }
-      }
-      /**
-       * Returns the latest state of `MotionValue`
-       *
-       * @returns - The latest state of `MotionValue`
-       *
-       * @public
-       */
-      get() {
-          return this.current;
-      }
-      /**
-       * @public
-       */
-      getPrevious() {
-          return this.prev;
-      }
-      /**
-       * Returns the latest velocity of `MotionValue`
-       *
-       * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-       *
-       * @public
-       */
-      getVelocity() {
-          // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
-          return this.canTrackVelocity
-              ? // These casts could be avoided if parseFloat would be typed better
-                  velocityPerSecond(parseFloat(this.current) -
-                      parseFloat(this.prev), this.timeDelta)
-              : 0;
-      }
-      /**
-       * Registers a new animation to control this `MotionValue`. Only one
-       * animation can drive a `MotionValue` at one time.
-       *
-       * ```jsx
-       * value.start()
-       * ```
-       *
-       * @param animation - A function that starts the provided animation
-       *
-       * @internal
-       */
-      start(animation) {
-          this.stop();
-          return new Promise((resolve) => {
-              this.hasAnimated = true;
-              this.stopAnimation = animation(resolve);
-          }).then(() => this.clearAnimation());
-      }
-      /**
-       * Stop the currently active animation.
-       *
-       * @public
-       */
-      stop() {
-          if (this.stopAnimation)
-              this.stopAnimation();
-          this.clearAnimation();
-      }
-      /**
-       * Returns `true` if this value is currently animating.
-       *
-       * @public
-       */
-      isAnimating() {
-          return !!this.stopAnimation;
-      }
-      clearAnimation() {
-          this.stopAnimation = null;
-      }
-      /**
-       * Destroy and clean up subscribers to this `MotionValue`.
-       *
-       * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-       * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-       * created a `MotionValue` via the `motionValue` function.
-       *
-       * @public
-       */
-      destroy() {
-          this.updateSubscribers.clear();
-          this.renderSubscribers.clear();
-          this.stop();
-      }
-  }
-  function motionValue(init) {
-      return new MotionValue(init);
-  }
-
-  const isMotionValue = (value) => !!(value === null || value === void 0 ? void 0 : value.getVelocity);
-
-  /**
-   * Converts seconds to milliseconds
-   *
-   * @param seconds - Time in seconds.
-   * @return milliseconds - Converted time in milliseconds.
-   */
-  const secondsToMilliseconds = (seconds) => seconds * 1000;
-
-  var warning = function () { };
-  var invariant = function () { };
-  {
-      warning = function (check, message) {
-          if (!check && typeof console !== 'undefined') {
-              console.warn(message);
-          }
-      };
-      invariant = function (check, message) {
-          if (!check) {
-              throw new Error(message);
-          }
-      };
-  }
-
-  const noop = (any) => any;
-
-  /*
-    Bezier function generator
-    This has been modified from Gaëtan Renaudeau's BezierEasing
-    https://github.com/gre/bezier-easing/blob/master/src/index.js
-    https://github.com/gre/bezier-easing/blob/master/LICENSE
-    
-    I've removed the newtonRaphsonIterate algo because in benchmarking it
-    wasn't noticiably faster than binarySubdivision, indeed removing it
-    usually improved times, depending on the curve.
-    I also removed the lookup table, as for the added bundle size and loop we're
-    only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-    to 12 to compensate and this still tended to be faster for no perceivable
-    loss in accuracy.
-    Usage
-      const easeOut = cubicBezier(.17,.67,.83,.67);
-      const x = easeOut(0.5); // returns 0.627...
-  */
-  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-  const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
-      t;
-  const subdivisionPrecision = 0.0000001;
-  const subdivisionMaxIterations = 12;
-  function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-      let currentX;
-      let currentT;
-      let i = 0;
-      do {
-          currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-          currentX = calcBezier(currentT, mX1, mX2) - x;
-          if (currentX > 0.0) {
-              upperBound = currentT;
-          }
-          else {
-              lowerBound = currentT;
-          }
-      } while (Math.abs(currentX) > subdivisionPrecision &&
-          ++i < subdivisionMaxIterations);
-      return currentT;
-  }
-  function cubicBezier(mX1, mY1, mX2, mY2) {
-      // If this is a linear gradient, return linear easing
-      if (mX1 === mY1 && mX2 === mY2)
-          return noop;
-      const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-      // If animation is at start/end, return t without easing
-      return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-  }
-
-  // Accepts an easing function and returns a new one that outputs mirrored values for
-  // the second half of the animation. Turns easeIn into easeInOut.
-  const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
-
-  // Accepts an easing function and returns a new one that outputs reversed values.
-  // Turns easeIn into easeOut.
-  const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
-
-  const easeIn = (p) => p * p;
-  const easeOut = reverseEasing(easeIn);
-  const easeInOut = mirrorEasing(easeIn);
-
-  const circIn = (p) => 1 - Math.sin(Math.acos(p));
-  const circOut = reverseEasing(circIn);
-  const circInOut = mirrorEasing(circOut);
-
-  const createBackIn = (power = 1.525) => (p) => p * p * ((power + 1) * p - power);
-  const backIn = createBackIn();
-  const backOut = reverseEasing(backIn);
-  const backInOut = mirrorEasing(backIn);
-
-  const createAnticipate = (power) => {
-      const backEasing = createBackIn(power);
-      return (p) => (p *= 2) < 1
-          ? 0.5 * backEasing(p)
-          : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-  };
-  const anticipate = createAnticipate();
-
-  const easingLookup = {
-      linear: noop,
-      easeIn,
-      easeInOut,
-      easeOut,
-      circIn,
-      circInOut,
-      circOut,
-      backIn,
-      backInOut,
-      backOut,
-      anticipate,
-  };
-  const easingDefinitionToFunction = (definition) => {
-      if (Array.isArray(definition)) {
-          // If cubic bezier definition, create bezier curve
-          invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
-          const [x1, y1, x2, y2] = definition;
-          return cubicBezier(x1, y1, x2, y2);
-      }
-      else if (typeof definition === "string") {
-          // Else lookup from table
-          invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
-          return easingLookup[definition];
-      }
-      return definition;
-  };
-  const isEasingArray = (ease) => {
-      return Array.isArray(ease) && typeof ease[0] !== "number";
-  };
-
-  /**
-   * TODO: When we move from string as a source of truth to data models
-   * everything in this folder should probably be referred to as models vs types
-   */
-  // If this number is a decimal, make it just five decimal places
-  // to avoid exponents
-  const sanitize = (v) => Math.round(v * 100000) / 100000;
-  const floatRegex = /(-)?([\d]*\.?[\d])+/g;
-  const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
-  const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
-  function isString(v) {
-      return typeof v === "string";
-  }
-
-  const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
-
-  const number = {
-      test: (v) => typeof v === "number",
-      parse: parseFloat,
-      transform: (v) => v,
-  };
-  const alpha = {
-      ...number,
-      transform: (v) => clamp(0, 1, v),
-  };
-  const scale = {
-      ...number,
-      default: 1,
-  };
-
-  /**
-   * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
-   * but false if a number or multiple colors
+   * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
+   * but false if a number or multiple colors
    */
   const isColorString = (type, testProp) => (v) => {
       return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
@@ -800,1228 +379,1673 @@
               return hsla.parse(v);
           }
           else {
-              return hex.parse(v);
+              return hex.parse(v);
+          }
+      },
+      transform: (v) => {
+          return isString(v)
+              ? v
+              : v.hasOwnProperty("red")
+                  ? rgba.transform(v)
+                  : hsla.transform(v);
+      },
+  };
+
+  /*
+    Value in range from progress
+
+    Given a lower limit and an upper limit, we return the value within
+    that range as expressed by progress (usually a number from 0 to 1)
+
+    So progress = 0.5 would change
+
+    from -------- to
+
+    to
+
+    from ---- to
+
+    E.g. from = 10, to = 20, progress = 0.5 => 15
+
+    @param [number]: Lower limit of range
+    @param [number]: Upper limit of range
+    @param [number]: The progress between lower and upper limits expressed 0-1
+    @return [number]: Value as calculated from progress within range (not limited within range)
+  */
+  const mix = (from, to, progress) => -progress * from + progress * to + from;
+
+  // Adapted from https://gist.github.com/mjackson/5311256
+  function hueToRgb(p, q, t) {
+      if (t < 0)
+          t += 1;
+      if (t > 1)
+          t -= 1;
+      if (t < 1 / 6)
+          return p + (q - p) * 6 * t;
+      if (t < 1 / 2)
+          return q;
+      if (t < 2 / 3)
+          return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+  }
+  function hslaToRgba({ hue, saturation, lightness, alpha }) {
+      hue /= 360;
+      saturation /= 100;
+      lightness /= 100;
+      let red = 0;
+      let green = 0;
+      let blue = 0;
+      if (!saturation) {
+          red = green = blue = lightness;
+      }
+      else {
+          const q = lightness < 0.5
+              ? lightness * (1 + saturation)
+              : lightness + saturation - lightness * saturation;
+          const p = 2 * lightness - q;
+          red = hueToRgb(p, q, hue + 1 / 3);
+          green = hueToRgb(p, q, hue);
+          blue = hueToRgb(p, q, hue - 1 / 3);
+      }
+      return {
+          red: Math.round(red * 255),
+          green: Math.round(green * 255),
+          blue: Math.round(blue * 255),
+          alpha,
+      };
+  }
+
+  // Linear color space blending
+  // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
+  // Demonstrated http://codepen.io/osublake/pen/xGVVaN
+  const mixLinearColor = (from, to, v) => {
+      const fromExpo = from * from;
+      return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));
+  };
+  const colorTypes = [hex, rgba, hsla];
+  const getColorType = (v) => colorTypes.find((type) => type.test(v));
+  function asRGBA(color) {
+      const type = getColorType(color);
+      invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+      let model = type.parse(color);
+      if (type === hsla) {
+          // TODO Remove this cast - needed since Framer Motion's stricter typing
+          model = hslaToRgba(model);
+      }
+      return model;
+  }
+  const mixColor = (from, to) => {
+      const fromRGBA = asRGBA(from);
+      const toRGBA = asRGBA(to);
+      const blended = { ...fromRGBA };
+      return (v) => {
+          blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
+          blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
+          blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
+          blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v);
+          return rgba.transform(blended);
+      };
+  };
+
+  /**
+   * Pipe
+   * Compose other transformers to run linearily
+   * pipe(min(20), max(40))
+   * @param  {...functions} transformers
+   * @return {function}
+   */
+  const combineFunctions = (a, b) => (v) => b(a(v));
+  const pipe = (...transformers) => transformers.reduce(combineFunctions);
+
+  const colorToken = "${c}";
+  const numberToken = "${n}";
+  function test(v) {
+      var _a, _b;
+      return (isNaN(v) &&
+          isString(v) &&
+          (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
+              (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
+              0);
+  }
+  function analyseComplexValue(v) {
+      if (typeof v === "number")
+          v = `${v}`;
+      const values = [];
+      let numColors = 0;
+      let numNumbers = 0;
+      const colors = v.match(colorRegex);
+      if (colors) {
+          numColors = colors.length;
+          // Strip colors from input so they're not picked up by number regex.
+          // There's a better way to combine these regex searches, but its beyond my regex skills
+          v = v.replace(colorRegex, colorToken);
+          values.push(...colors.map(color.parse));
+      }
+      const numbers = v.match(floatRegex);
+      if (numbers) {
+          numNumbers = numbers.length;
+          v = v.replace(floatRegex, numberToken);
+          values.push(...numbers.map(number.parse));
+      }
+      return { values, numColors, numNumbers, tokenised: v };
+  }
+  function parse(v) {
+      return analyseComplexValue(v).values;
+  }
+  function createTransformer(source) {
+      const { values, numColors, tokenised } = analyseComplexValue(source);
+      const numValues = values.length;
+      return (v) => {
+          let output = tokenised;
+          for (let i = 0; i < numValues; i++) {
+              output = output.replace(i < numColors ? colorToken : numberToken, i < numColors
+                  ? color.transform(v[i])
+                  : sanitize(v[i]));
+          }
+          return output;
+      };
+  }
+  const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+  function getAnimatableNone$1(v) {
+      const parsed = parse(v);
+      const transformer = createTransformer(v);
+      return transformer(parsed.map(convertNumbersToZero));
+  }
+  const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
+
+  function getMixer(origin, target) {
+      if (typeof origin === "number") {
+          return (v) => mix(origin, target, v);
+      }
+      else if (color.test(origin)) {
+          return mixColor(origin, target);
+      }
+      else {
+          return mixComplex(origin, target);
+      }
+  }
+  const mixArray = (from, to) => {
+      const output = [...from];
+      const numValues = output.length;
+      const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));
+      return (v) => {
+          for (let i = 0; i < numValues; i++) {
+              output[i] = blendValue[i](v);
+          }
+          return output;
+      };
+  };
+  const mixObject = (origin, target) => {
+      const output = { ...origin, ...target };
+      const blendValue = {};
+      for (const key in output) {
+          if (origin[key] !== undefined && target[key] !== undefined) {
+              blendValue[key] = getMixer(origin[key], target[key]);
+          }
+      }
+      return (v) => {
+          for (const key in blendValue) {
+              output[key] = blendValue[key](v);
+          }
+          return output;
+      };
+  };
+  const mixComplex = (origin, target) => {
+      const template = complex.createTransformer(target);
+      const originStats = analyseComplexValue(origin);
+      const targetStats = analyseComplexValue(target);
+      const canInterpolate = originStats.numColors === targetStats.numColors &&
+          originStats.numNumbers >= targetStats.numNumbers;
+      if (canInterpolate) {
+          return pipe(mixArray(originStats.values, targetStats.values), template);
+      }
+      else {
+          warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
+          return (p) => `${p > 0 ? target : origin}`;
+      }
+  };
+
+  /*
+    Progress within given range
+
+    Given a lower limit and an upper limit, we return the progress
+    (expressed as a number 0-1) represented by the given value, and
+    limit that progress to within 0-1.
+
+    @param [number]: Lower limit
+    @param [number]: Upper limit
+    @param [number]: Value to find progress within given range
+    @return [number]: Progress of value within range as expressed 0-1
+  */
+  const progress = (from, to, value) => {
+      const toFromDifference = to - from;
+      return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+  };
+
+  const mixNumber = (from, to) => (p) => mix(from, to, p);
+  function detectMixerFactory(v) {
+      if (typeof v === "number") {
+          return mixNumber;
+      }
+      else if (typeof v === "string") {
+          if (color.test(v)) {
+              return mixColor;
+          }
+          else {
+              return mixComplex;
           }
-      },
-      transform: (v) => {
-          return isString(v)
-              ? v
-              : v.hasOwnProperty("red")
-                  ? rgba.transform(v)
-                  : hsla.transform(v);
-      },
-  };
-
-  const colorToken = "${c}";
-  const numberToken = "${n}";
-  function test(v) {
-      var _a, _b;
-      return (isNaN(v) &&
-          isString(v) &&
-          (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
-              (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
-              0);
-  }
-  function analyseComplexValue(v) {
-      if (typeof v === "number")
-          v = `${v}`;
-      const values = [];
-      let numColors = 0;
-      let numNumbers = 0;
-      const colors = v.match(colorRegex);
-      if (colors) {
-          numColors = colors.length;
-          // Strip colors from input so they're not picked up by number regex.
-          // There's a better way to combine these regex searches, but its beyond my regex skills
-          v = v.replace(colorRegex, colorToken);
-          values.push(...colors.map(color.parse));
       }
-      const numbers = v.match(floatRegex);
-      if (numbers) {
-          numNumbers = numbers.length;
-          v = v.replace(floatRegex, numberToken);
-          values.push(...numbers.map(number.parse));
+      else if (Array.isArray(v)) {
+          return mixArray;
       }
-      return { values, numColors, numNumbers, tokenised: v };
-  }
-  function parse(v) {
-      return analyseComplexValue(v).values;
+      else if (typeof v === "object") {
+          return mixObject;
+      }
+      return mixNumber;
   }
-  function createTransformer(source) {
-      const { values, numColors, tokenised } = analyseComplexValue(source);
-      const numValues = values.length;
-      return (v) => {
-          let output = tokenised;
-          for (let i = 0; i < numValues; i++) {
-              output = output.replace(i < numColors ? colorToken : numberToken, i < numColors
-                  ? color.transform(v[i])
-                  : sanitize(v[i]));
+  function createMixers(output, ease, customMixer) {
+      const mixers = [];
+      const mixerFactory = customMixer || detectMixerFactory(output[0]);
+      const numMixers = output.length - 1;
+      for (let i = 0; i < numMixers; i++) {
+          let mixer = mixerFactory(output[i], output[i + 1]);
+          if (ease) {
+              const easingFunction = Array.isArray(ease) ? ease[i] : ease;
+              mixer = pipe(easingFunction, mixer);
           }
-          return output;
-      };
-  }
-  const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
-  function getAnimatableNone$1(v) {
-      const parsed = parse(v);
-      const transformer = createTransformer(v);
-      return transformer(parsed.map(convertNumbersToZero));
+          mixers.push(mixer);
+      }
+      return mixers;
   }
-  const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
-
   /**
-   * Check if a value is animatable. Examples:
+   * Create a function that maps from a numerical input array to a generic output array.
    *
-   * ✅: 100, "100px", "#fff"
-   * ❌: "block", "url(2.jpg)"
-   * @param value
+   * Accepts:
+   *   - Numbers
+   *   - Colors (hex, hsl, hsla, rgb, rgba)
+   *   - Complex (combinations of one or more numbers or strings)
    *
-   * @internal
+   * ```jsx
+   * const mixColor = interpolate([0, 1], ['#fff', '#000'])
+   *
+   * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
+   * ```
+   *
+   * TODO Revist this approach once we've moved to data models for values,
+   * probably not needed to pregenerate mixer functions.
+   *
+   * @public
    */
-  const isAnimatable = (key, value) => {
-      // If the list of keys tat might be non-animatable grows, replace with Set
-      if (key === "zIndex")
-          return false;
-      // If it's a number or a keyframes array, we can animate it. We might at some point
-      // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
-      // but for now lets leave it like this for performance reasons
-      if (typeof value === "number" || Array.isArray(value))
-          return true;
-      if (typeof value === "string" && // It's animatable if we have a string
-          complex.test(value) && // And it contains numbers and/or colors
-          !value.startsWith("url(") // Unless it starts with "url("
-      ) {
-          return true;
+  function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
+      const inputLength = input.length;
+      invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+      invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, "Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.");
+      // If input runs highest -> lowest, reverse both arrays
+      if (input[0] > input[inputLength - 1]) {
+          input = [...input].reverse();
+          output = [...output].reverse();
       }
-      return false;
-  };
+      const mixers = createMixers(output, ease, mixer);
+      const numMixers = mixers.length;
+      const interpolator = (v) => {
+          let i = 0;
+          if (numMixers > 1) {
+              for (; i < input.length - 2; i++) {
+                  if (v < input[i + 1])
+                      break;
+              }
+          }
+          const progressInRange = progress(input[i], input[i + 1], v);
+          return mixers[i](progressInRange);
+      };
+      return isClamp
+          ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))
+          : interpolator;
+  }
 
-  const isKeyframesTarget = (v) => {
-      return Array.isArray(v);
+  const noop = (any) => any;
+
+  /*
+    Bezier function generator
+    This has been modified from Gaëtan Renaudeau's BezierEasing
+    https://github.com/gre/bezier-easing/blob/master/src/index.js
+    https://github.com/gre/bezier-easing/blob/master/LICENSE
+    
+    I've removed the newtonRaphsonIterate algo because in benchmarking it
+    wasn't noticiably faster than binarySubdivision, indeed removing it
+    usually improved times, depending on the curve.
+    I also removed the lookup table, as for the added bundle size and loop we're
+    only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+    to 12 to compensate and this still tended to be faster for no perceivable
+    loss in accuracy.
+    Usage
+      const easeOut = cubicBezier(.17,.67,.83,.67);
+      const x = easeOut(0.5); // returns 0.627...
+  */
+  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+  const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
+      t;
+  const subdivisionPrecision = 0.0000001;
+  const subdivisionMaxIterations = 12;
+  function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+      let currentX;
+      let currentT;
+      let i = 0;
+      do {
+          currentT = lowerBound + (upperBound - lowerBound) / 2.0;
+          currentX = calcBezier(currentT, mX1, mX2) - x;
+          if (currentX > 0.0) {
+              upperBound = currentT;
+          }
+          else {
+              lowerBound = currentT;
+          }
+      } while (Math.abs(currentX) > subdivisionPrecision &&
+          ++i < subdivisionMaxIterations);
+      return currentT;
+  }
+  function cubicBezier(mX1, mY1, mX2, mY2) {
+      // If this is a linear gradient, return linear easing
+      if (mX1 === mY1 && mX2 === mY2)
+          return noop;
+      const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+      // If animation is at start/end, return t without easing
+      return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+  }
+
+  const circIn = (p) => 1 - Math.sin(Math.acos(p));
+  const circOut = reverseEasing(circIn);
+  const circInOut = mirrorEasing(circOut);
+
+  const createBackIn = (power = 1.525) => (p) => p * p * ((power + 1) * p - power);
+  const backIn = createBackIn();
+  const backOut = reverseEasing(backIn);
+  const backInOut = mirrorEasing(backIn);
+
+  const createAnticipate = (power) => {
+      const backEasing = createBackIn(power);
+      return (p) => (p *= 2) < 1
+          ? 0.5 * backEasing(p)
+          : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
   };
+  const anticipate = createAnticipate();
 
-  const underDampedSpring = () => ({
-      type: "spring",
-      stiffness: 500,
-      damping: 25,
-      restSpeed: 10,
-  });
-  const criticallyDampedSpring = (to) => ({
-      type: "spring",
-      stiffness: 550,
-      damping: to === 0 ? 2 * Math.sqrt(550) : 30,
-      restSpeed: 10,
-  });
-  const linearTween = () => ({
-      type: "keyframes",
-      ease: "linear",
-      duration: 0.3,
-  });
-  const keyframes$1 = (values) => ({
-      type: "keyframes",
-      duration: 0.8,
-      values,
-  });
-  const defaultTransitions = {
-      x: underDampedSpring,
-      y: underDampedSpring,
-      z: underDampedSpring,
-      rotate: underDampedSpring,
-      rotateX: underDampedSpring,
-      rotateY: underDampedSpring,
-      rotateZ: underDampedSpring,
-      scaleX: criticallyDampedSpring,
-      scaleY: criticallyDampedSpring,
-      scale: criticallyDampedSpring,
-      opacity: linearTween,
-      backgroundColor: linearTween,
-      color: linearTween,
-      default: criticallyDampedSpring,
+  const easingLookup = {
+      linear: noop,
+      easeIn,
+      easeInOut,
+      easeOut,
+      circIn,
+      circInOut,
+      circOut,
+      backIn,
+      backInOut,
+      backOut,
+      anticipate,
   };
-  const getDefaultTransition = (valueKey, to) => {
-      let transitionFactory;
-      if (isKeyframesTarget(to)) {
-          transitionFactory = keyframes$1;
+  const easingDefinitionToFunction = (definition) => {
+      if (Array.isArray(definition)) {
+          // If cubic bezier definition, create bezier curve
+          invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+          const [x1, y1, x2, y2] = definition;
+          return cubicBezier(x1, y1, x2, y2);
       }
-      else {
-          transitionFactory =
-              defaultTransitions[valueKey] || defaultTransitions.default;
+      else if (typeof definition === "string") {
+          // Else lookup from table
+          invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+          return easingLookup[definition];
       }
-      return { to, ...transitionFactory(to) };
-  };
-
-  /**
-   * Properties that should default to 1 or 100%
-   */
-  const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
-  function applyDefaultFilter(v) {
-      const [name, value] = v.slice(0, -1).split("(");
-      if (name === "drop-shadow")
-          return v;
-      const [number] = value.match(floatRegex) || [];
-      if (!number)
-          return v;
-      const unit = value.replace(number, "");
-      let defaultValue = maxDefaults.has(name) ? 1 : 0;
-      if (number !== value)
-          defaultValue *= 100;
-      return name + "(" + defaultValue + unit + ")";
-  }
-  const functionRegex = /([a-z-]*)\(.*?\)/g;
-  const filter = {
-      ...complex,
-      getAnimatableNone: (v) => {
-          const functions = v.match(functionRegex);
-          return functions ? functions.map(applyDefaultFilter).join(" ") : v;
-      },
-  };
-
-  const int = {
-      ...number,
-      transform: Math.round,
+      return definition;
   };
-
-  const numberValueTypes = {
-      // Border props
-      borderWidth: px,
-      borderTopWidth: px,
-      borderRightWidth: px,
-      borderBottomWidth: px,
-      borderLeftWidth: px,
-      borderRadius: px,
-      radius: px,
-      borderTopLeftRadius: px,
-      borderTopRightRadius: px,
-      borderBottomRightRadius: px,
-      borderBottomLeftRadius: px,
-      // Positioning props
-      width: px,
-      maxWidth: px,
-      height: px,
-      maxHeight: px,
-      size: px,
-      top: px,
-      right: px,
-      bottom: px,
-      left: px,
-      // Spacing props
-      padding: px,
-      paddingTop: px,
-      paddingRight: px,
-      paddingBottom: px,
-      paddingLeft: px,
-      margin: px,
-      marginTop: px,
-      marginRight: px,
-      marginBottom: px,
-      marginLeft: px,
-      // Transform props
-      rotate: degrees,
-      rotateX: degrees,
-      rotateY: degrees,
-      rotateZ: degrees,
-      scale,
-      scaleX: scale,
-      scaleY: scale,
-      scaleZ: scale,
-      skew: degrees,
-      skewX: degrees,
-      skewY: degrees,
-      distance: px,
-      translateX: px,
-      translateY: px,
-      translateZ: px,
-      x: px,
-      y: px,
-      z: px,
-      perspective: px,
-      transformPerspective: px,
-      opacity: alpha,
-      originX: progressPercentage,
-      originY: progressPercentage,
-      originZ: px,
-      // Misc
-      zIndex: int,
-      // SVG
-      fillOpacity: alpha,
-      strokeOpacity: alpha,
-      numOctaves: int,
+  const isEasingArray = (ease) => {
+      return Array.isArray(ease) && typeof ease[0] !== "number";
   };
 
-  /**
-   * A map of default value types for common values
-   */
-  const defaultValueTypes = {
-      ...numberValueTypes,
-      // Color props
-      color,
-      backgroundColor: color,
-      outlineColor: color,
-      fill: color,
-      stroke: color,
-      // Border props
-      borderColor: color,
-      borderTopColor: color,
-      borderRightColor: color,
-      borderBottomColor: color,
-      borderLeftColor: color,
-      filter,
-      WebkitFilter: filter,
-  };
-  /**
-   * Gets the default ValueType for the provided value key
-   */
-  const getDefaultValueType = (key) => defaultValueTypes[key];
+  function defaultEasing(values, easing) {
+      return values.map(() => easing || easeInOut).splice(0, values.length - 1);
+  }
+  function defaultOffset(values) {
+      const numValues = values.length;
+      return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
+  }
+  function convertOffsetToTimes(offset, duration) {
+      return offset.map((o) => o * duration);
+  }
+  function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
+      keyframeValues = [...keyframeValues];
+      const origin = keyframes[0];
+      /**
+       * Easing functions can be externally defined as strings. Here we convert them
+       * into actual functions.
+       */
+      const easingFunctions = isEasingArray(ease)
+          ? ease.map(easingDefinitionToFunction)
+          : easingDefinitionToFunction(ease);
+      /**
+       * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+       * to reduce GC during animation.
+       */
+      const state = { done: false, value: origin };
+      /**
+       * Create a times array based on the provided 0-1 offsets
+       */
+      const absoluteTimes = convertOffsetToTimes(
+      // Only use the provided offsets if they're the correct length
+      // TODO Maybe we should warn here if there's a length mismatch
+      times && times.length === keyframes.length
+          ? times
+          : defaultOffset(keyframeValues), duration);
+      function createInterpolator() {
+          return interpolate(absoluteTimes, keyframeValues, {
+              ease: Array.isArray(easingFunctions)
+                  ? easingFunctions
+                  : defaultEasing(keyframeValues, easingFunctions),
+          });
+      }
+      let interpolator = createInterpolator();
+      return {
+          next: (t) => {
+              state.value = interpolator(t);
+              state.done = t >= duration;
+              return state;
+          },
+          flipTarget: () => {
+              keyframeValues.reverse();
+              interpolator = createInterpolator();
+          },
+      };
+  }
 
-  function getAnimatableNone(key, value) {
-      var _a;
-      let defaultValueType = getDefaultValueType(key);
-      if (defaultValueType !== filter)
-          defaultValueType = complex;
-      // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
-      return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
+  const safeMin = 0.001;
+  const minDuration = 0.01;
+  const maxDuration = 10.0;
+  const minDamping = 0.05;
+  const maxDamping = 1;
+  function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
+      let envelope;
+      let derivative;
+      warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
+      let dampingRatio = 1 - bounce;
+      /**
+       * Restrict dampingRatio and duration to within acceptable ranges.
+       */
+      dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
+      duration = clamp(minDuration, maxDuration, duration / 1000);
+      if (dampingRatio < 1) {
+          /**
+           * Underdamped spring
+           */
+          envelope = (undampedFreq) => {
+              const exponentialDecay = undampedFreq * dampingRatio;
+              const delta = exponentialDecay * duration;
+              const a = exponentialDecay - velocity;
+              const b = calcAngularFreq(undampedFreq, dampingRatio);
+              const c = Math.exp(-delta);
+              return safeMin - (a / b) * c;
+          };
+          derivative = (undampedFreq) => {
+              const exponentialDecay = undampedFreq * dampingRatio;
+              const delta = exponentialDecay * duration;
+              const d = delta * velocity + velocity;
+              const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
+              const f = Math.exp(-delta);
+              const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
+              const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
+              return (factor * ((d - e) * f)) / g;
+          };
+      }
+      else {
+          /**
+           * Critically-damped spring
+           */
+          envelope = (undampedFreq) => {
+              const a = Math.exp(-undampedFreq * duration);
+              const b = (undampedFreq - velocity) * duration + 1;
+              return -safeMin + a * b;
+          };
+          derivative = (undampedFreq) => {
+              const a = Math.exp(-undampedFreq * duration);
+              const b = (velocity - undampedFreq) * (duration * duration);
+              return a * b;
+          };
+      }
+      const initialGuess = 5 / duration;
+      const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
+      duration = duration * 1000;
+      if (isNaN(undampedFreq)) {
+          return {
+              stiffness: 100,
+              damping: 10,
+              duration,
+          };
+      }
+      else {
+          const stiffness = Math.pow(undampedFreq, 2) * mass;
+          return {
+              stiffness,
+              damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
+              duration,
+          };
+      }
+  }
+  const rootIterations = 12;
+  function approximateRoot(envelope, derivative, initialGuess) {
+      let result = initialGuess;
+      for (let i = 1; i < rootIterations; i++) {
+          result = result - envelope(result) / derivative(result);
+      }
+      return result;
+  }
+  function calcAngularFreq(undampedFreq, dampingRatio) {
+      return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
   }
 
-  const instantAnimationState = {
-      current: false,
-  };
+  /*
+    Convert velocity into velocity per second
 
-  const isCustomValue = (v) => {
-      return Boolean(v && typeof v === "object" && v.mix && v.toValue);
-  };
-  const resolveFinalValueInKeyframes = (v) => {
-      // TODO maybe throw if v.length - 1 is placeholder token?
-      return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-  };
+    @param [number]: Unit per frame
+    @param [number]: Frame duration in ms
+  */
+  function velocityPerSecond(velocity, frameDuration) {
+      return frameDuration ? velocity * (1000 / frameDuration) : 0;
+  }
 
-  function delay(callback, timeout) {
-      const start = performance.now();
-      const checkElapsed = ({ timestamp }) => {
-          const elapsed = timestamp - start;
-          if (elapsed >= timeout) {
-              cancelSync.read(checkElapsed);
-              callback(elapsed - timeout);
+  const durationKeys = ["duration", "bounce"];
+  const physicsKeys = ["stiffness", "damping", "mass"];
+  function isSpringType(options, keys) {
+      return keys.some((key) => options[key] !== undefined);
+  }
+  function getSpringOptions(options) {
+      let springOptions = {
+          velocity: 0.0,
+          stiffness: 100,
+          damping: 10,
+          mass: 1.0,
+          isResolvedFromDuration: false,
+          ...options,
+      };
+      // stiffness/damping/mass overrides duration/bounce
+      if (!isSpringType(options, physicsKeys) &&
+          isSpringType(options, durationKeys)) {
+          const derived = findSpring(options);
+          springOptions = {
+              ...springOptions,
+              ...derived,
+              velocity: 0.0,
+              mass: 1.0,
+          };
+          springOptions.isResolvedFromDuration = true;
+      }
+      return springOptions;
+  }
+  const velocitySampleDuration = 5;
+  /**
+   * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
+   */
+  function spring({ keyframes, restSpeed = 2, restDelta = 0.01, ...options }) {
+      let origin = keyframes[0];
+      let target = keyframes[keyframes.length - 1];
+      /**
+       * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+       * to reduce GC during animation.
+       */
+      const state = { done: false, value: origin };
+      const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
+      let resolveSpring = zero;
+      let initialVelocity = velocity ? -(velocity / 1000) : 0.0;
+      const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
+      function createSpring() {
+          const initialDelta = target - origin;
+          const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
+          /**
+           * If we're working within what looks like a 0-1 range, change the default restDelta
+           * to 0.01
+           */
+          if (restDelta === undefined) {
+              restDelta = Math.min(Math.abs(target - origin) / 100, 0.4);
+          }
+          if (dampingRatio < 1) {
+              const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+              // Underdamped spring
+              resolveSpring = (t) => {
+                  const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                  return (target -
+                      envelope *
+                          (((initialVelocity +
+                              dampingRatio * undampedAngularFreq * initialDelta) /
+                              angularFreq) *
+                              Math.sin(angularFreq * t) +
+                              initialDelta * Math.cos(angularFreq * t)));
+              };
+          }
+          else if (dampingRatio === 1) {
+              // Critically damped spring
+              resolveSpring = (t) => target -
+                  Math.exp(-undampedAngularFreq * t) *
+                      (initialDelta +
+                          (initialVelocity + undampedAngularFreq * initialDelta) *
+                              t);
           }
+          else {
+              // Overdamped spring
+              const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
+              resolveSpring = (t) => {
+                  const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                  // When performing sinh or cosh values can hit Infinity so we cap them here
+                  const freqForT = Math.min(dampedAngularFreq * t, 300);
+                  return (target -
+                      (envelope *
+                          ((initialVelocity +
+                              dampingRatio * undampedAngularFreq * initialDelta) *
+                              Math.sinh(freqForT) +
+                              dampedAngularFreq *
+                                  initialDelta *
+                                  Math.cosh(freqForT))) /
+                          dampedAngularFreq);
+              };
+          }
+      }
+      createSpring();
+      return {
+          next: (t) => {
+              const current = resolveSpring(t);
+              if (!isResolvedFromDuration) {
+                  let currentVelocity = initialVelocity;
+                  if (t !== 0) {
+                      /**
+                       * We only need to calculate velocity for under-damped springs
+                       * as over- and critically-damped springs can't overshoot, so
+                       * checking only for displacement is enough.
+                       */
+                      if (dampingRatio < 1) {
+                          const prevT = Math.max(0, t - velocitySampleDuration);
+                          currentVelocity = velocityPerSecond(current - resolveSpring(prevT), t - prevT);
+                      }
+                      else {
+                          currentVelocity = 0;
+                      }
+                  }
+                  const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
+                  const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
+                  state.done =
+                      isBelowVelocityThreshold && isBelowDisplacementThreshold;
+              }
+              else {
+                  state.done = t >= duration;
+              }
+              state.value = state.done ? target : current;
+              return state;
+          },
+          flipTarget: () => {
+              initialVelocity = -initialVelocity;
+              [origin, target] = [target, origin];
+              createSpring();
+          },
       };
-      sync.read(checkElapsed, true);
-      return () => cancelSync.read(checkElapsed);
   }
+  spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string";
+  const zero = (_t) => 0;
 
-  /*
-    Value in range from progress
-
-    Given a lower limit and an upper limit, we return the value within
-    that range as expressed by progress (usually a number from 0 to 1)
-
-    So progress = 0.5 would change
-
-    from -------- to
-
-    to
-
-    from ---- to
-
-    E.g. from = 10, to = 20, progress = 0.5 => 15
-
-    @param [number]: Lower limit of range
-    @param [number]: Upper limit of range
-    @param [number]: The progress between lower and upper limits expressed 0-1
-    @return [number]: Value as calculated from progress within range (not limited within range)
-  */
-  const mix = (from, to, progress) => -progress * from + progress * to + from;
+  function decay({ 
+  /**
+   * The decay animation dynamically calculates an end of the animation
+   * based on the initial keyframe, so we only need to define a single keyframe
+   * as default.
+   */
+  keyframes = [0], velocity = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
+      const origin = keyframes[0];
+      /**
+       * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+       * to reduce GC during animation.
+       */
+      const state = { done: false, value: origin };
+      let amplitude = power * velocity;
+      const ideal = origin + amplitude;
+      const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
+      /**
+       * If the target has changed we need to re-calculate the amplitude, otherwise
+       * the animation will start from the wrong position.
+       */
+      if (target !== ideal)
+          amplitude = target - origin;
+      return {
+          next: (t) => {
+              const delta = -amplitude * Math.exp(-t / timeConstant);
+              state.done = !(delta > restDelta || delta < -restDelta);
+              state.value = state.done ? target : target + delta;
+              return state;
+          },
+          flipTarget: () => { },
+      };
+  }
 
-  // Adapted from https://gist.github.com/mjackson/5311256
-  function hueToRgb(p, q, t) {
-      if (t < 0)
-          t += 1;
-      if (t > 1)
-          t -= 1;
-      if (t < 1 / 6)
-          return p + (q - p) * 6 * t;
-      if (t < 1 / 2)
-          return q;
-      if (t < 2 / 3)
-          return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
+  const types = {
+      decay,
+      keyframes: keyframes,
+      tween: keyframes,
+      spring,
+  };
+  function loopElapsed(elapsed, duration, delay = 0) {
+      return elapsed - duration - delay;
   }
-  function hslaToRgba({ hue, saturation, lightness, alpha }) {
-      hue /= 360;
-      saturation /= 100;
-      lightness /= 100;
-      let red = 0;
-      let green = 0;
-      let blue = 0;
-      if (!saturation) {
-          red = green = blue = lightness;
+  function reverseElapsed(elapsed, duration = 0, delay = 0, isForwardPlayback = true) {
+      return isForwardPlayback
+          ? loopElapsed(duration + -elapsed, duration, delay)
+          : duration - (elapsed - duration) + delay;
+  }
+  function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
+      return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;
+  }
+  const framesync = (update) => {
+      const passTimestamp = ({ delta }) => update(delta);
+      return {
+          start: () => sync.update(passTimestamp, true),
+          stop: () => cancelSync.update(passTimestamp),
+      };
+  };
+  function animate$1({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
+      var _a, _b;
+      let driverControls;
+      let repeatCount = 0;
+      let computedDuration = duration;
+      let latest;
+      let isComplete = false;
+      let isForwardPlayback = true;
+      let interpolateFromNumber;
+      const animator = types[keyframes.length > 2 ? "keyframes" : type];
+      const origin = keyframes[0];
+      const target = keyframes[keyframes.length - 1];
+      if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, origin, target)) {
+          interpolateFromNumber = interpolate([0, 100], [origin, target], {
+              clamp: false,
+          });
+          keyframes = [0, 100];
+      }
+      const animation = animator({
+          ...options,
+          duration,
+          keyframes,
+      });
+      function repeat() {
+          repeatCount++;
+          if (repeatType === "reverse") {
+              isForwardPlayback = repeatCount % 2 === 0;
+              elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);
+          }
+          else {
+              elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);
+              if (repeatType === "mirror")
+                  animation.flipTarget();
+          }
+          isComplete = false;
+          onRepeat && onRepeat();
+      }
+      function complete() {
+          driverControls.stop();
+          onComplete && onComplete();
+      }
+      function update(delta) {
+          if (!isForwardPlayback)
+              delta = -delta;
+          elapsed += delta;
+          if (!isComplete) {
+              const state = animation.next(Math.max(0, elapsed));
+              latest = state.value;
+              if (interpolateFromNumber)
+                  latest = interpolateFromNumber(latest);
+              isComplete = isForwardPlayback ? state.done : elapsed <= 0;
+          }
+          onUpdate && onUpdate(latest);
+          if (isComplete) {
+              if (repeatCount === 0) {
+                  computedDuration =
+                      computedDuration !== undefined ? computedDuration : elapsed;
+              }
+              if (repeatCount < repeatMax) {
+                  hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
+              }
+              else {
+                  complete();
+              }
+          }
       }
-      else {
-          const q = lightness < 0.5
-              ? lightness * (1 + saturation)
-              : lightness + saturation - lightness * saturation;
-          const p = 2 * lightness - q;
-          red = hueToRgb(p, q, hue + 1 / 3);
-          green = hueToRgb(p, q, hue);
-          blue = hueToRgb(p, q, hue - 1 / 3);
+      function play() {
+          onPlay && onPlay();
+          driverControls = driver(update);
+          driverControls.start();
       }
+      play();
       return {
-          red: Math.round(red * 255),
-          green: Math.round(green * 255),
-          blue: Math.round(blue * 255),
-          alpha,
+          stop: () => {
+              onStop && onStop();
+              driverControls.stop();
+          },
       };
   }
 
-  // Linear color space blending
-  // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
-  // Demonstrated http://codepen.io/osublake/pen/xGVVaN
-  const mixLinearColor = (from, to, v) => {
-      const fromExpo = from * from;
-      return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));
-  };
-  const colorTypes = [hex, rgba, hsla];
-  const getColorType = (v) => colorTypes.find((type) => type.test(v));
-  function asRGBA(color) {
-      const type = getColorType(color);
-      invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
-      let model = type.parse(color);
-      if (type === hsla) {
-          // TODO Remove this cast - needed since Framer Motion's stricter typing
-          model = hslaToRgba(model);
-      }
-      return model;
-  }
-  const mixColor = (from, to) => {
-      const fromRGBA = asRGBA(from);
-      const toRGBA = asRGBA(to);
-      const blended = { ...fromRGBA };
-      return (v) => {
-          blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
-          blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
-          blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
-          blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v);
-          return rgba.transform(blended);
-      };
-  };
-
-  /**
-   * Pipe
-   * Compose other transformers to run linearily
-   * pipe(min(20), max(40))
-   * @param  {...functions} transformers
-   * @return {function}
-   */
-  const combineFunctions = (a, b) => (v) => b(a(v));
-  const pipe = (...transformers) => transformers.reduce(combineFunctions);
-
-  function getMixer(origin, target) {
-      if (typeof origin === "number") {
-          return (v) => mix(origin, target, v);
+  function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
+      const origin = keyframes[0];
+      let currentAnimation;
+      function isOutOfBounds(v) {
+          return (min !== undefined && v < min) || (max !== undefined && v > max);
       }
-      else if (color.test(origin)) {
-          return mixColor(origin, target);
+      function findNearestBoundary(v) {
+          if (min === undefined)
+              return max;
+          if (max === undefined)
+              return min;
+          return Math.abs(min - v) < Math.abs(max - v) ? min : max;
       }
-      else {
-          return mixComplex(origin, target);
+      function startAnimation(options) {
+          currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
+          currentAnimation = animate$1({
+              keyframes: [0, 1],
+              velocity: 0,
+              ...options,
+              driver,
+              onUpdate: (v) => {
+                  var _a;
+                  onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v);
+                  (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);
+              },
+              onComplete,
+              onStop,
+          });
       }
-  }
-  const mixArray = (from, to) => {
-      const output = [...from];
-      const numValues = output.length;
-      const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));
-      return (v) => {
-          for (let i = 0; i < numValues; i++) {
-              output[i] = blendValue[i](v);
-          }
-          return output;
-      };
-  };
-  const mixObject = (origin, target) => {
-      const output = { ...origin, ...target };
-      const blendValue = {};
-      for (const key in output) {
-          if (origin[key] !== undefined && target[key] !== undefined) {
-              blendValue[key] = getMixer(origin[key], target[key]);
-          }
+      function startSpring(options) {
+          startAnimation({
+              type: "spring",
+              stiffness: bounceStiffness,
+              damping: bounceDamping,
+              restDelta,
+              ...options,
+          });
       }
-      return (v) => {
-          for (const key in blendValue) {
-              output[key] = blendValue[key](v);
-          }
-          return output;
-      };
-  };
-  const mixComplex = (origin, target) => {
-      const template = complex.createTransformer(target);
-      const originStats = analyseComplexValue(origin);
-      const targetStats = analyseComplexValue(target);
-      const canInterpolate = originStats.numColors === targetStats.numColors &&
-          originStats.numNumbers >= targetStats.numNumbers;
-      if (canInterpolate) {
-          return pipe(mixArray(originStats.values, targetStats.values), template);
+      if (isOutOfBounds(origin)) {
+          // Start the animation with spring if outside the defined boundaries
+          startSpring({
+              velocity,
+              keyframes: [origin, findNearestBoundary(origin)],
+          });
       }
       else {
-          warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
-          return (p) => `${p > 0 ? target : origin}`;
+          /**
+           * Or if the value is out of bounds, simulate the inertia movement
+           * with the decay animation.
+           *
+           * Pre-calculate the target so we can detect if it's out-of-bounds.
+           * If it is, we want to check per frame when to switch to a spring
+           * animation
+           */
+          let target = power * velocity + origin;
+          if (typeof modifyTarget !== "undefined")
+              target = modifyTarget(target);
+          const boundary = findNearestBoundary(target);
+          const heading = boundary === min ? -1 : 1;
+          let prev;
+          let current;
+          const checkBoundary = (v) => {
+              prev = current;
+              current = v;
+              velocity = velocityPerSecond(v - prev, frameData.delta);
+              if ((heading === 1 && v > boundary) ||
+                  (heading === -1 && v < boundary)) {
+                  startSpring({ keyframes: [v, boundary], velocity });
+              }
+          };
+          startAnimation({
+              type: "decay",
+              keyframes: [origin, 0],
+              velocity,
+              timeConstant,
+              power,
+              restDelta,
+              modifyTarget,
+              onUpdate: isOutOfBounds(target) ? checkBoundary : undefined,
+          });
       }
-  };
-
-  /*
-    Progress within given range
-
-    Given a lower limit and an upper limit, we return the progress
-    (expressed as a number 0-1) represented by the given value, and
-    limit that progress to within 0-1.
+      return {
+          stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(),
+      };
+  }
 
-    @param [number]: Lower limit
-    @param [number]: Upper limit
-    @param [number]: Value to find progress within given range
-    @return [number]: Progress of value within range as expressed 0-1
-  */
-  const progress = (from, to, value) => {
-      const toFromDifference = to - from;
-      return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+  const underDampedSpring = () => ({
+      type: "spring",
+      stiffness: 500,
+      damping: 25,
+      restSpeed: 10,
+  });
+  const criticallyDampedSpring = (target) => ({
+      type: "spring",
+      stiffness: 550,
+      damping: target === 0 ? 2 * Math.sqrt(550) : 30,
+      restSpeed: 10,
+  });
+  const linearTween = () => ({
+      type: "keyframes",
+      ease: "linear",
+      duration: 0.3,
+  });
+  const keyframesTransition = {
+      type: "keyframes",
+      duration: 0.8,
   };
-
-  const mixNumber = (from, to) => (p) => mix(from, to, p);
-  function detectMixerFactory(v) {
-      if (typeof v === "number") {
-          return mixNumber;
-      }
-      else if (typeof v === "string") {
-          if (color.test(v)) {
-              return mixColor;
-          }
-          else {
-              return mixComplex;
-          }
-      }
-      else if (Array.isArray(v)) {
-          return mixArray;
-      }
-      else if (typeof v === "object") {
-          return mixObject;
+  const defaultTransitions = {
+      x: underDampedSpring,
+      y: underDampedSpring,
+      z: underDampedSpring,
+      rotate: underDampedSpring,
+      rotateX: underDampedSpring,
+      rotateY: underDampedSpring,
+      rotateZ: underDampedSpring,
+      scaleX: criticallyDampedSpring,
+      scaleY: criticallyDampedSpring,
+      scale: criticallyDampedSpring,
+      opacity: linearTween,
+      backgroundColor: linearTween,
+      color: linearTween,
+      default: criticallyDampedSpring,
+  };
+  const getDefaultTransition = (valueKey, { keyframes }) => {
+      if (keyframes.length > 2) {
+          return keyframesTransition;
       }
-      return mixNumber;
-  }
-  function createMixers(output, ease, customMixer) {
-      const mixers = [];
-      const mixerFactory = customMixer || detectMixerFactory(output[0]);
-      const numMixers = output.length - 1;
-      for (let i = 0; i < numMixers; i++) {
-          let mixer = mixerFactory(output[i], output[i + 1]);
-          if (ease) {
-              const easingFunction = Array.isArray(ease) ? ease[i] : ease;
-              mixer = pipe(easingFunction, mixer);
-          }
-          mixers.push(mixer);
+      else {
+          const factory = defaultTransitions[valueKey] || defaultTransitions.default;
+          return factory(keyframes[1]);
       }
-      return mixers;
-  }
+  };
+
   /**
-   * Create a function that maps from a numerical input array to a generic output array.
-   *
-   * Accepts:
-   *   - Numbers
-   *   - Colors (hex, hsl, hsla, rgb, rgba)
-   *   - Complex (combinations of one or more numbers or strings)
-   *
-   * ```jsx
-   * const mixColor = interpolate([0, 1], ['#fff', '#000'])
-   *
-   * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
-   * ```
+   * Check if a value is animatable. Examples:
    *
-   * TODO Revist this approach once we've moved to data models for values,
-   * probably not needed to pregenerate mixer functions.
+   * ✅: 100, "100px", "#fff"
+   * ❌: "block", "url(2.jpg)"
+   * @param value
    *
-   * @public
+   * @internal
    */
-  function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
-      const inputLength = input.length;
-      invariant(inputLength === output.length, "Both input and output ranges must be the same length");
-      invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, "Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.");
-      // If input runs highest -> lowest, reverse both arrays
-      if (input[0] > input[inputLength - 1]) {
-          input = [...input].reverse();
-          output = [...output].reverse();
+  const isAnimatable = (key, value) => {
+      // If the list of keys tat might be non-animatable grows, replace with Set
+      if (key === "zIndex")
+          return false;
+      // If it's a number or a keyframes array, we can animate it. We might at some point
+      // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
+      // but for now lets leave it like this for performance reasons
+      if (typeof value === "number" || Array.isArray(value))
+          return true;
+      if (typeof value === "string" && // It's animatable if we have a string
+          complex.test(value) && // And it contains numbers and/or colors
+          !value.startsWith("url(") // Unless it starts with "url("
+      ) {
+          return true;
       }
-      const mixers = createMixers(output, ease, mixer);
-      const numMixers = mixers.length;
-      const interpolator = (v) => {
-          let i = 0;
-          if (numMixers > 1) {
-              for (; i < input.length - 2; i++) {
-                  if (v < input[i + 1])
-                      break;
-              }
-          }
-          const progressInRange = progress(input[i], input[i + 1], v);
-          return mixers[i](progressInRange);
-      };
-      return isClamp
-          ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))
-          : interpolator;
+      return false;
+  };
+
+  /**
+   * Properties that should default to 1 or 100%
+   */
+  const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
+  function applyDefaultFilter(v) {
+      const [name, value] = v.slice(0, -1).split("(");
+      if (name === "drop-shadow")
+          return v;
+      const [number] = value.match(floatRegex) || [];
+      if (!number)
+          return v;
+      const unit = value.replace(number, "");
+      let defaultValue = maxDefaults.has(name) ? 1 : 0;
+      if (number !== value)
+          defaultValue *= 100;
+      return name + "(" + defaultValue + unit + ")";
   }
+  const functionRegex = /([a-z-]*)\(.*?\)/g;
+  const filter = {
+      ...complex,
+      getAnimatableNone: (v) => {
+          const functions = v.match(functionRegex);
+          return functions ? functions.map(applyDefaultFilter).join(" ") : v;
+      },
+  };
 
-  function defaultEasing(values, easing) {
-      return values.map(() => easing || easeInOut).splice(0, values.length - 1);
+  const int = {
+      ...number,
+      transform: Math.round,
+  };
+
+  const numberValueTypes = {
+      // Border props
+      borderWidth: px,
+      borderTopWidth: px,
+      borderRightWidth: px,
+      borderBottomWidth: px,
+      borderLeftWidth: px,
+      borderRadius: px,
+      radius: px,
+      borderTopLeftRadius: px,
+      borderTopRightRadius: px,
+      borderBottomRightRadius: px,
+      borderBottomLeftRadius: px,
+      // Positioning props
+      width: px,
+      maxWidth: px,
+      height: px,
+      maxHeight: px,
+      size: px,
+      top: px,
+      right: px,
+      bottom: px,
+      left: px,
+      // Spacing props
+      padding: px,
+      paddingTop: px,
+      paddingRight: px,
+      paddingBottom: px,
+      paddingLeft: px,
+      margin: px,
+      marginTop: px,
+      marginRight: px,
+      marginBottom: px,
+      marginLeft: px,
+      // Transform props
+      rotate: degrees,
+      rotateX: degrees,
+      rotateY: degrees,
+      rotateZ: degrees,
+      scale,
+      scaleX: scale,
+      scaleY: scale,
+      scaleZ: scale,
+      skew: degrees,
+      skewX: degrees,
+      skewY: degrees,
+      distance: px,
+      translateX: px,
+      translateY: px,
+      translateZ: px,
+      x: px,
+      y: px,
+      z: px,
+      perspective: px,
+      transformPerspective: px,
+      opacity: alpha,
+      originX: progressPercentage,
+      originY: progressPercentage,
+      originZ: px,
+      // Misc
+      zIndex: int,
+      // SVG
+      fillOpacity: alpha,
+      strokeOpacity: alpha,
+      numOctaves: int,
+  };
+
+  /**
+   * A map of default value types for common values
+   */
+  const defaultValueTypes = {
+      ...numberValueTypes,
+      // Color props
+      color,
+      backgroundColor: color,
+      outlineColor: color,
+      fill: color,
+      stroke: color,
+      // Border props
+      borderColor: color,
+      borderTopColor: color,
+      borderRightColor: color,
+      borderBottomColor: color,
+      borderLeftColor: color,
+      filter,
+      WebkitFilter: filter,
+  };
+  /**
+   * Gets the default ValueType for the provided value key
+   */
+  const getDefaultValueType = (key) => defaultValueTypes[key];
+
+  function getAnimatableNone(key, value) {
+      var _a;
+      let defaultValueType = getDefaultValueType(key);
+      if (defaultValueType !== filter)
+          defaultValueType = complex;
+      // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
+      return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
   }
-  function defaultOffset(values) {
-      const numValues = values.length;
-      return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
+
+  /**
+   * Decide whether a transition is defined on a given Transition.
+   * This filters out orchestration options and returns true
+   * if any options are left.
+   */
+  function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
+      return !!Object.keys(transition).length;
   }
-  function convertOffsetToTimes(offset, duration) {
-      return offset.map((o) => o * duration);
+  function isZero(value) {
+      return (value === 0 ||
+          (typeof value === "string" &&
+              parseFloat(value) === 0 &&
+              value.indexOf(" ") === -1));
   }
-  function keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) {
-      /**
-       * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
-       * to reduce GC during animation.
-       */
-      const state = { done: false, value: from };
-      /**
-       * Convert values to an array if they've been given as from/to options
-       */
-      const values = Array.isArray(to) ? to : [from, to];
-      /**
-       * Create a times array based on the provided 0-1 offsets
-       */
-      const times = convertOffsetToTimes(
-      // Only use the provided offsets if they're the correct length
-      // TODO Maybe we should warn here if there's a length mismatch
-      offset && offset.length === values.length
-          ? offset
-          : defaultOffset(values), duration);
-      function createInterpolator() {
-          return interpolate(times, values, {
-              ease: Array.isArray(ease) ? ease : defaultEasing(values, ease),
-          });
-      }
-      let interpolator = createInterpolator();
-      return {
-          next: (t) => {
-              state.value = interpolator(t);
-              state.done = t >= duration;
-              return state;
-          },
-          flipTarget: () => {
-              values.reverse();
-              interpolator = createInterpolator();
-          },
-      };
+  function getZeroUnit(potentialUnitType) {
+      return typeof potentialUnitType === "number"
+          ? 0
+          : getAnimatableNone("", potentialUnitType);
+  }
+  function getValueTransition(transition, key) {
+      return transition[key] || transition["default"] || transition;
   }
 
-  const safeMin = 0.001;
-  const minDuration = 0.01;
-  const maxDuration = 10.0;
-  const minDamping = 0.05;
-  const maxDamping = 1;
-  function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
-      let envelope;
-      let derivative;
-      warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
-      let dampingRatio = 1 - bounce;
-      /**
-       * Restrict dampingRatio and duration to within acceptable ranges.
-       */
-      dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-      duration = clamp(minDuration, maxDuration, duration / 1000);
-      if (dampingRatio < 1) {
-          /**
-           * Underdamped spring
-           */
-          envelope = (undampedFreq) => {
-              const exponentialDecay = undampedFreq * dampingRatio;
-              const delta = exponentialDecay * duration;
-              const a = exponentialDecay - velocity;
-              const b = calcAngularFreq(undampedFreq, dampingRatio);
-              const c = Math.exp(-delta);
-              return safeMin - (a / b) * c;
-          };
-          derivative = (undampedFreq) => {
-              const exponentialDecay = undampedFreq * dampingRatio;
-              const delta = exponentialDecay * duration;
-              const d = delta * velocity + velocity;
-              const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
-              const f = Math.exp(-delta);
-              const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
-              const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
-              return (factor * ((d - e) * f)) / g;
-          };
-      }
-      else {
+  function getKeyframes(value, valueName, target, transition) {
+      const isTargetAnimatable = isAnimatable(valueName, target);
+      let origin = transition.from !== undefined ? transition.from : value.get();
+      if (origin === "none" && isTargetAnimatable && typeof target === "string") {
           /**
-           * Critically-damped spring
+           * If we're trying to animate from "none", try and get an animatable version
+           * of the target. This could be improved to work both ways.
            */
-          envelope = (undampedFreq) => {
-              const a = Math.exp(-undampedFreq * duration);
-              const b = (undampedFreq - velocity) * duration + 1;
-              return -safeMin + a * b;
-          };
-          derivative = (undampedFreq) => {
-              const a = Math.exp(-undampedFreq * duration);
-              const b = (velocity - undampedFreq) * (duration * duration);
-              return a * b;
-          };
-      }
-      const initialGuess = 5 / duration;
-      const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
-      duration = duration * 1000;
-      if (isNaN(undampedFreq)) {
-          return {
-              stiffness: 100,
-              damping: 10,
-              duration,
-          };
-      }
-      else {
-          const stiffness = Math.pow(undampedFreq, 2) * mass;
-          return {
-              stiffness,
-              damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
-              duration,
-          };
+          origin = getAnimatableNone(valueName, target);
       }
-  }
-  const rootIterations = 12;
-  function approximateRoot(envelope, derivative, initialGuess) {
-      let result = initialGuess;
-      for (let i = 1; i < rootIterations; i++) {
-          result = result - envelope(result) / derivative(result);
+      else if (isZero(origin) && typeof target === "string") {
+          origin = getZeroUnit(target);
       }
-      return result;
-  }
-  function calcAngularFreq(undampedFreq, dampingRatio) {
-      return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
-  }
-
-  const durationKeys = ["duration", "bounce"];
-  const physicsKeys = ["stiffness", "damping", "mass"];
-  function isSpringType(options, keys) {
-      return keys.some((key) => options[key] !== undefined);
-  }
-  function getSpringOptions(options) {
-      let springOptions = {
-          velocity: 0.0,
-          stiffness: 100,
-          damping: 10,
-          mass: 1.0,
-          isResolvedFromDuration: false,
-          ...options,
-      };
-      // stiffness/damping/mass overrides duration/bounce
-      if (!isSpringType(options, physicsKeys) &&
-          isSpringType(options, durationKeys)) {
-          const derived = findSpring(options);
-          springOptions = {
-              ...springOptions,
-              ...derived,
-              velocity: 0.0,
-              mass: 1.0,
-          };
-          springOptions.isResolvedFromDuration = true;
+      else if (!Array.isArray(target) &&
+          isZero(target) &&
+          typeof origin === "string") {
+          target = getZeroUnit(origin);
       }
-      return springOptions;
-  }
-  /**
-   * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
-   */
-  function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...options }) {
       /**
-       * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
-       * to reduce GC during animation.
+       * If the target has been defined as a series of keyframes
        */
-      const state = { done: false, value: from };
-      let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
-      let resolveSpring = zero;
-      let resolveVelocity = zero;
-      function createSpring() {
-          const initialVelocity = velocity ? -(velocity / 1000) : 0.0;
-          const initialDelta = to - from;
-          const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
-          const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
+      if (Array.isArray(target)) {
           /**
-           * If we're working within what looks like a 0-1 range, change the default restDelta
-           * to 0.01
+           * Ensure an initial wildcard keyframe is hydrated by the origin.
+           * TODO: Support extra wildcard keyframes i.e [1, null, 0]
            */
-          if (restDelta === undefined) {
-              restDelta = Math.min(Math.abs(to - from) / 100, 0.4);
-          }
-          if (dampingRatio < 1) {
-              const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
-              // Underdamped spring
-              resolveSpring = (t) => {
-                  const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                  return (to -
-                      envelope *
-                          (((initialVelocity +
-                              dampingRatio * undampedAngularFreq * initialDelta) /
-                              angularFreq) *
-                              Math.sin(angularFreq * t) +
-                              initialDelta * Math.cos(angularFreq * t)));
-              };
-              resolveVelocity = (t) => {
-                  // TODO Resolve these calculations with the above
-                  const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                  return (dampingRatio *
-                      undampedAngularFreq *
-                      envelope *
-                      ((Math.sin(angularFreq * t) *
-                          (initialVelocity +
-                              dampingRatio *
-                                  undampedAngularFreq *
-                                  initialDelta)) /
-                          angularFreq +
-                          initialDelta * Math.cos(angularFreq * t)) -
-                      envelope *
-                          (Math.cos(angularFreq * t) *
-                              (initialVelocity +
-                                  dampingRatio *
-                                      undampedAngularFreq *
-                                      initialDelta) -
-                              angularFreq *
-                                  initialDelta *
-                                  Math.sin(angularFreq * t)));
-              };
-          }
-          else if (dampingRatio === 1) {
-              // Critically damped spring
-              resolveSpring = (t) => to -
-                  Math.exp(-undampedAngularFreq * t) *
-                      (initialDelta +
-                          (initialVelocity + undampedAngularFreq * initialDelta) *
-                              t);
-          }
-          else {
-              // Overdamped spring
-              const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
-              resolveSpring = (t) => {
-                  const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                  // When performing sinh or cosh values can hit Infinity so we cap them here
-                  const freqForT = Math.min(dampedAngularFreq * t, 300);
-                  return (to -
-                      (envelope *
-                          ((initialVelocity +
-                              dampingRatio * undampedAngularFreq * initialDelta) *
-                              Math.sinh(freqForT) +
-                              dampedAngularFreq *
-                                  initialDelta *
-                                  Math.cosh(freqForT))) /
-                          dampedAngularFreq);
-              };
+          if (target[0] === null) {
+              target[0] = origin;
           }
+          return target;
+      }
+      else {
+          return [origin, target];
       }
-      createSpring();
-      return {
-          next: (t) => {
-              const current = resolveSpring(t);
-              if (!isResolvedFromDuration) {
-                  const currentVelocity = resolveVelocity(t) * 1000;
-                  const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
-                  const isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta;
-                  state.done =
-                      isBelowVelocityThreshold && isBelowDisplacementThreshold;
-              }
-              else {
-                  state.done = t >= duration;
-              }
-              state.value = state.done ? to : current;
-              return state;
-          },
-          flipTarget: () => {
-              velocity = -velocity;
-              [from, to] = [to, from];
-              createSpring();
-          },
-      };
   }
-  spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string";
-  const zero = (_t) => 0;
 
-  function decay({ velocity = 0, from = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
-      /**
-       * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
-       * to reduce GC during animation.
-       */
-      const state = { done: false, value: from };
-      let amplitude = power * velocity;
-      const ideal = from + amplitude;
-      const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
-      /**
-       * If the target has changed we need to re-calculate the amplitude, otherwise
-       * the animation will start from the wrong position.
-       */
-      if (target !== ideal)
-          amplitude = target - from;
-      return {
-          next: (t) => {
-              const delta = -amplitude * Math.exp(-t / timeConstant);
-              state.done = !(delta > restDelta || delta < -restDelta);
-              state.value = state.done ? target : target + delta;
-              return state;
-          },
-          flipTarget: () => { },
+  const featureTests = {
+      waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
+  };
+  const results = {};
+  const supports = {};
+  /**
+   * Generate features tests that cache their results.
+   */
+  for (const key in featureTests) {
+      supports[key] = () => {
+          if (results[key] === undefined)
+              results[key] = featureTests[key]();
+          return results[key];
       };
   }
 
-  const types = { decay, keyframes, spring };
-  function loopElapsed(elapsed, duration, delay = 0) {
-      return elapsed - duration - delay;
-  }
-  function reverseElapsed(elapsed, duration = 0, delay = 0, isForwardPlayback = true) {
-      return isForwardPlayback
-          ? loopElapsed(duration + -elapsed, duration, delay)
-          : duration - (elapsed - duration) + delay;
-  }
-  function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
-      return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;
-  }
-  const framesync = (update) => {
-      const passTimestamp = ({ delta }) => update(delta);
-      return {
-          start: () => sync.update(passTimestamp, true),
-          stop: () => cancelSync.update(passTimestamp),
-      };
-  };
-  function animate$1({ from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
-      var _a, _b;
-      let { to } = options;
-      let driverControls;
-      let repeatCount = 0;
-      let computedDuration = options
-          .duration;
-      let latest;
-      let isComplete = false;
-      let isForwardPlayback = true;
-      let interpolateFromNumber;
-      const animator = types[Array.isArray(to) ? "keyframes" : type];
-      if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, from, to)) {
-          interpolateFromNumber = interpolate([0, 100], [from, to], {
-              clamp: false,
-          });
-          from = 0;
-          to = 100;
-      }
-      const animation = animator({ ...options, from, to });
-      function repeat() {
-          repeatCount++;
-          if (repeatType === "reverse") {
-              isForwardPlayback = repeatCount % 2 === 0;
-              elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);
+  /**
+   * A list of values that can be hardware-accelerated.
+   */
+  const acceleratedValues = new Set([]);
+  const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
+      return (onComplete) => {
+          const valueTransition = getValueTransition(transition, valueName) || {};
+          /**
+           * Most transition values are currently completely overwritten by value-specific
+           * transitions. In the future it'd be nicer to blend these transitions. But for now
+           * delay actually does inherit from the root transition if not value-specific.
+           */
+          const delay = valueTransition.delay || transition.delay || 0;
+          /**
+           * Elapsed isn't a public transition option but can be passed through from
+           * optimized appear effects in milliseconds.
+           */
+          let { elapsed = 0 } = transition;
+          elapsed = elapsed - secondsToMilliseconds(delay);
+          const keyframes = getKeyframes(value, valueName, target, valueTransition);
+          /**
+           * Check if we're able to animate between the start and end keyframes,
+           * and throw a warning if we're attempting to animate between one that's
+           * animatable and another that isn't.
+           */
+          const originKeyframe = keyframes[0];
+          const targetKeyframe = keyframes[keyframes.length - 1];
+          const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
+          const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
+          warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+          let options = {
+              keyframes,
+              velocity: value.getVelocity(),
+              ...valueTransition,
+              elapsed,
+              onUpdate: (v) => {
+                  value.set(v);
+                  valueTransition.onUpdate && valueTransition.onUpdate(v);
+              },
+              onComplete: () => {
+                  onComplete();
+                  valueTransition.onComplete && valueTransition.onComplete();
+              },
+          };
+          if (!isOriginAnimatable ||
+              !isTargetAnimatable ||
+              instantAnimationState.current ||
+              valueTransition.type === false) {
+              /**
+               * If we can't animate this value, or the global instant animation flag is set,
+               * or this is simply defined as an instant transition, return an instant transition.
+               */
+              return createInstantAnimation(options);
           }
-          else {
-              elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);
-              if (repeatType === "mirror")
-                  animation.flipTarget();
+          else if (valueTransition.type === "inertia") {
+              /**
+               * If this is an inertia animation, we currently don't support pre-generating
+               * keyframes for this as such it must always run on the main thread.
+               */
+              const animation = inertia(options);
+              return () => animation.stop();
           }
-          isComplete = false;
-          onRepeat && onRepeat();
-      }
-      function complete() {
-          driverControls.stop();
-          onComplete && onComplete();
-      }
-      function update(delta) {
-          if (!isForwardPlayback)
-              delta = -delta;
-          elapsed += delta;
-          if (!isComplete) {
-              const state = animation.next(Math.max(0, elapsed));
-              latest = state.value;
-              if (interpolateFromNumber)
-                  latest = interpolateFromNumber(latest);
-              isComplete = isForwardPlayback ? state.done : elapsed <= 0;
+          /**
+           * If there's no transition defined for this value, we can generate
+           * unqiue transition settings for this value.
+           */
+          if (!isTransitionDefined(valueTransition)) {
+              options = {
+                  ...options,
+                  ...getDefaultTransition(valueName, options),
+              };
           }
-          onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);
-          if (isComplete) {
-              if (repeatCount === 0) {
-                  computedDuration =
-                      computedDuration !== undefined ? computedDuration : elapsed;
-              }
-              if (repeatCount < repeatMax) {
-                  hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
-              }
-              else {
-                  complete();
-              }
+          /**
+           * Both WAAPI and our internal animation functions use durations
+           * as defined by milliseconds, while our external API defines them
+           * as seconds.
+           */
+          if (options.duration) {
+              options.duration = secondsToMilliseconds(options.duration);
+          }
+          if (options.repeatDelay) {
+              options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
+          }
+          const canAccelerateAnimation = acceleratedValues.has(valueName) &&
+              supports.waapi() &&
+              value.owner &&
+              !value.owner.getProps().onUpdate &&
+              !options.repeat;
+          if (canAccelerateAnimation) {
+              /**
+               * If this animation is capable of being run via WAAPI, then do so.
+               *
+               * TODO: Currently no values are hardware accelerated so this clause
+               * will never trigger. Animation to be added in subsequent PR.
+               */
+              return createAcceleratedAnimation();
+          }
+          else {
+              /**
+               * Otherwise, fall back to the main thread.
+               */
+              const animation = animate$1(options);
+              return () => animation.stop();
           }
-      }
-      function play() {
-          onPlay === null || onPlay === void 0 ? void 0 : onPlay();
-          driverControls = driver(update);
-          driverControls.start();
-      }
-      autoplay && play();
-      return {
-          stop: () => {
-              onStop === null || onStop === void 0 ? void 0 : onStop();
-              driverControls.stop();
-          },
       };
+  };
+
+  function addUniqueItem(arr, item) {
+      if (arr.indexOf(item) === -1)
+          arr.push(item);
+  }
+  function removeItem(arr, item) {
+      const index = arr.indexOf(item);
+      if (index > -1)
+          arr.splice(index, 1);
   }
 
-  function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
-      let currentAnimation;
-      function isOutOfBounds(v) {
-          return (min !== undefined && v < min) || (max !== undefined && v > max);
+  class SubscriptionManager {
+      constructor() {
+          this.subscriptions = [];
       }
-      function boundaryNearest(v) {
-          if (min === undefined)
-              return max;
-          if (max === undefined)
-              return min;
-          return Math.abs(min - v) < Math.abs(max - v) ? min : max;
+      add(handler) {
+          addUniqueItem(this.subscriptions, handler);
+          return () => removeItem(this.subscriptions, handler);
       }
-      function startAnimation(options) {
-          currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
-          currentAnimation = animate$1({
-              ...options,
-              driver,
-              onUpdate: (v) => {
-                  var _a;
-                  onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v);
-                  (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);
-              },
-              onComplete,
-              onStop,
-          });
+      notify(a, b, c) {
+          const numSubscriptions = this.subscriptions.length;
+          if (!numSubscriptions)
+              return;
+          if (numSubscriptions === 1) {
+              /**
+               * If there's only a single handler we can just call it without invoking a loop.
+               */
+              this.subscriptions[0](a, b, c);
+          }
+          else {
+              for (let i = 0; i < numSubscriptions; i++) {
+                  /**
+                   * Check whether the handler exists before firing as it's possible
+                   * the subscriptions were modified during this loop running.
+                   */
+                  const handler = this.subscriptions[i];
+                  handler && handler(a, b, c);
+              }
+          }
       }
-      function startSpring(options) {
-          startAnimation({
-              type: "spring",
-              stiffness: bounceStiffness,
-              damping: bounceDamping,
-              restDelta,
-              ...options,
-          });
+      getSize() {
+          return this.subscriptions.length;
       }
-      if (isOutOfBounds(from)) {
-          // Start the animation with spring if outside the defined boundaries
-          startSpring({ from, velocity, to: boundaryNearest(from) });
+      clear() {
+          this.subscriptions.length = 0;
       }
-      else {
+  }
+
+  const isFloat = (value) => {
+      return !isNaN(parseFloat(value));
+  };
+  /**
+   * `MotionValue` is used to track the state and velocity of motion values.
+   *
+   * @public
+   */
+  class MotionValue {
+      /**
+       * @param init - The initiating value
+       * @param config - Optional configuration options
+       *
+       * -  `transformer`: A function to transform incoming values with.
+       *
+       * @internal
+       */
+      constructor(init) {
           /**
-           * Or if the value is out of bounds, simulate the inertia movement
-           * with the decay animation.
+           * This will be replaced by the build step with the latest version number.
+           * When MotionValues are provided to motion components, warn if versions are mixed.
+           */
+          this.version = "7.8.1";
+          /**
+           * Duration, in milliseconds, since last updating frame.
            *
-           * Pre-calculate the target so we can detect if it's out-of-bounds.
-           * If it is, we want to check per frame when to switch to a spring
-           * animation
+           * @internal
            */
-          let target = power * velocity + from;
-          if (typeof modifyTarget !== "undefined")
-              target = modifyTarget(target);
-          const boundary = boundaryNearest(target);
-          const heading = boundary === min ? -1 : 1;
-          let prev;
-          let current;
-          const checkBoundary = (v) => {
-              prev = current;
-              current = v;
-              velocity = velocityPerSecond(v - prev, frameData.delta);
-              if ((heading === 1 && v > boundary) ||
-                  (heading === -1 && v < boundary)) {
-                  startSpring({ from: v, to: boundary, velocity });
+          this.timeDelta = 0;
+          /**
+           * Timestamp of the last time this `MotionValue` was updated.
+           *
+           * @internal
+           */
+          this.lastUpdated = 0;
+          /**
+           * Functions to notify when the `MotionValue` updates.
+           *
+           * @internal
+           */
+          this.updateSubscribers = new SubscriptionManager();
+          /**
+           * Functions to notify when the velocity updates.
+           *
+           * @internal
+           */
+          this.velocityUpdateSubscribers = new SubscriptionManager();
+          /**
+           * Functions to notify when the `MotionValue` updates and `render` is set to `true`.
+           *
+           * @internal
+           */
+          this.renderSubscribers = new SubscriptionManager();
+          /**
+           * Tracks whether this value can output a velocity. Currently this is only true
+           * if the value is numerical, but we might be able to widen the scope here and support
+           * other value types.
+           *
+           * @internal
+           */
+          this.canTrackVelocity = false;
+          this.updateAndNotify = (v, render = true) => {
+              this.prev = this.current;
+              this.current = v;
+              // Update timestamp
+              const { delta, timestamp } = frameData;
+              if (this.lastUpdated !== timestamp) {
+                  this.timeDelta = delta;
+                  this.lastUpdated = timestamp;
+                  sync.postRender(this.scheduleVelocityCheck);
+              }
+              // Update update subscribers
+              if (this.prev !== this.current) {
+                  this.updateSubscribers.notify(this.current);
+              }
+              // Update velocity subscribers
+              if (this.velocityUpdateSubscribers.getSize()) {
+                  this.velocityUpdateSubscribers.notify(this.getVelocity());
+              }
+              // Update render subscribers
+              if (render) {
+                  this.renderSubscribers.notify(this.current);
+              }
+          };
+          /**
+           * Schedule a velocity check for the next frame.
+           *
+           * This is an instanced and bound function to prevent generating a new
+           * function once per frame.
+           *
+           * @internal
+           */
+          this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck);
+          /**
+           * Updates `prev` with `current` if the value hasn't been updated this frame.
+           * This ensures velocity calculations return `0`.
+           *
+           * This is an instanced and bound function to prevent generating a new
+           * function once per frame.
+           *
+           * @internal
+           */
+          this.velocityCheck = ({ timestamp }) => {
+              if (timestamp !== this.lastUpdated) {
+                  this.prev = this.current;
+                  this.velocityUpdateSubscribers.notify(this.getVelocity());
               }
           };
-          startAnimation({
-              type: "decay",
-              from,
-              velocity,
-              timeConstant,
-              power,
-              restDelta,
-              modifyTarget,
-              onUpdate: isOutOfBounds(target) ? checkBoundary : undefined,
-          });
+          this.hasAnimated = false;
+          this.prev = this.current = init;
+          this.canTrackVelocity = isFloat(this.current);
       }
-      return {
-          stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(),
-      };
-  }
-
-  /**
-   * Decide whether a transition is defined on a given Transition.
-   * This filters out orchestration options and returns true
-   * if any options are left.
-   */
-  function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
-      return !!Object.keys(transition).length;
-  }
-  /**
-   * Convert Framer Motion's Transition type into Popmotion-compatible options.
-   */
-  function convertTransitionToAnimationOptions({ ease, times, ...transition }) {
-      const options = { ...transition };
-      if (times)
-          options["offset"] = times;
       /**
-       * Convert any existing durations from seconds to milliseconds
+       * Adds a function that will be notified when the `MotionValue` is updated.
+       *
+       * It returns a function that, when called, will cancel the subscription.
+       *
+       * When calling `onChange` inside a React component, it should be wrapped with the
+       * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+       * from the `useEffect` function to ensure you don't add duplicate subscribers..
+       *
+       * ```jsx
+       * export const MyComponent = () => {
+       *   const x = useMotionValue(0)
+       *   const y = useMotionValue(0)
+       *   const opacity = useMotionValue(1)
+       *
+       *   useEffect(() => {
+       *     function updateOpacity() {
+       *       const maxXY = Math.max(x.get(), y.get())
+       *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+       *       opacity.set(newOpacity)
+       *     }
+       *
+       *     const unsubscribeX = x.onChange(updateOpacity)
+       *     const unsubscribeY = y.onChange(updateOpacity)
+       *
+       *     return () => {
+       *       unsubscribeX()
+       *       unsubscribeY()
+       *     }
+       *   }, [])
+       *
+       *   return <motion.div style={{ x }} />
+       * }
+       * ```
+       *
+       * @privateRemarks
+       *
+       * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
+       *
+       * ```jsx
+       * useOnChange(x, () => {})
+       * ```
+       *
+       * @param subscriber - A function that receives the latest value.
+       * @returns A function that, when called, will cancel this subscription.
+       *
+       * @public
        */
-      if (transition.duration)
-          options["duration"] = secondsToMilliseconds(transition.duration);
-      if (transition.repeatDelay)
-          options.repeatDelay = secondsToMilliseconds(transition.repeatDelay);
+      onChange(subscription) {
+          return this.updateSubscribers.add(subscription);
+      }
+      clearListeners() {
+          this.updateSubscribers.clear();
+      }
       /**
-       * Map easing names to Popmotion's easing functions
+       * Adds a function that will be notified when the `MotionValue` requests a render.
+       *
+       * @param subscriber - A function that's provided the latest value.
+       * @returns A function that, when called, will cancel this subscription.
+       *
+       * @internal
        */
-      if (ease) {
-          options["ease"] = isEasingArray(ease)
-              ? ease.map(easingDefinitionToFunction)
-              : easingDefinitionToFunction(ease);
+      onRenderRequest(subscription) {
+          // Render immediately
+          subscription(this.get());
+          return this.renderSubscribers.add(subscription);
       }
       /**
-       * Support legacy transition API
+       * Attaches a passive effect to the `MotionValue`.
+       *
+       * @internal
        */
-      if (transition.type === "tween")
-          options.type = "keyframes";
+      attach(passiveEffect) {
+          this.passiveEffect = passiveEffect;
+      }
       /**
-       * TODO: Popmotion 9 has the ability to automatically detect whether to use
-       * a keyframes or spring animation, but does so by detecting velocity and other spring options.
-       * It'd be good to introduce a similar thing here.
+       * Sets the state of the `MotionValue`.
+       *
+       * @remarks
+       *
+       * ```jsx
+       * const x = useMotionValue(0)
+       * x.set(10)
+       * ```
+       *
+       * @param latest - Latest value to set.
+       * @param render - Whether to notify render subscribers. Defaults to `true`
+       *
+       * @public
        */
-      if (transition.type !== "spring")
-          options.type = "keyframes";
-      return options;
-  }
-  /**
-   * Get the delay for a value by checking Transition with decreasing specificity.
-   */
-  function getDelayFromTransition(transition, key) {
-      const valueTransition = getValueTransition(transition, key) || {};
-      return valueTransition.delay !== undefined
-          ? valueTransition.delay
-          : transition.delay !== undefined
-              ? transition.delay
-              : 0;
-  }
-  function hydrateKeyframes(options) {
-      if (Array.isArray(options.to) && options.to[0] === null) {
-          options.to = [...options.to];
-          options.to[0] = options.from;
+      set(v, render = true) {
+          if (!render || !this.passiveEffect) {
+              this.updateAndNotify(v, render);
+          }
+          else {
+              this.passiveEffect(v, this.updateAndNotify);
+          }
       }
-      return options;
-  }
-  function getPopmotionAnimationOptions(transition, options, key) {
-      if (Array.isArray(options.to) && transition.duration === undefined) {
-          transition.duration = 0.8;
+      /**
+       * Returns the latest state of `MotionValue`
+       *
+       * @returns - The latest state of `MotionValue`
+       *
+       * @public
+       */
+      get() {
+          return this.current;
       }
-      hydrateKeyframes(options);
       /**
-       * Get a default transition if none is determined to be defined.
+       * @public
        */
-      if (!isTransitionDefined(transition)) {
-          transition = {
-              ...transition,
-              ...getDefaultTransition(key, options.to),
-          };
+      getPrevious() {
+          return this.prev;
       }
-      return {
-          ...options,
-          ...convertTransitionToAnimationOptions(transition),
-      };
-  }
-  /**
-   *
-   */
-  function getAnimation(key, value, target, transition, onComplete) {
-      const valueTransition = getValueTransition(transition, key) || {};
-      let origin = valueTransition.from !== undefined ? valueTransition.from : value.get();
-      const isTargetAnimatable = isAnimatable(key, target);
-      if (origin === "none" && isTargetAnimatable && typeof target === "string") {
-          /**
-           * If we're trying to animate from "none", try and get an animatable version
-           * of the target. This could be improved to work both ways.
-           */
-          origin = getAnimatableNone(key, target);
+      /**
+       * Returns the latest velocity of `MotionValue`
+       *
+       * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+       *
+       * @public
+       */
+      getVelocity() {
+          // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
+          return this.canTrackVelocity
+              ? // These casts could be avoided if parseFloat would be typed better
+                  velocityPerSecond(parseFloat(this.current) -
+                      parseFloat(this.prev), this.timeDelta)
+              : 0;
       }
-      else if (isZero(origin) && typeof target === "string") {
-          origin = getZeroUnit(target);
+      /**
+       * Registers a new animation to control this `MotionValue`. Only one
+       * animation can drive a `MotionValue` at one time.
+       *
+       * ```jsx
+       * value.start()
+       * ```
+       *
+       * @param animation - A function that starts the provided animation
+       *
+       * @internal
+       */
+      start(animation) {
+          this.stop();
+          return new Promise((resolve) => {
+              this.hasAnimated = true;
+              this.stopAnimation = animation(resolve);
+          }).then(() => this.clearAnimation());
       }
-      else if (!Array.isArray(target) &&
-          isZero(target) &&
-          typeof origin === "string") {
-          target = getZeroUnit(origin);
+      /**
+       * Stop the currently active animation.
+       *
+       * @public
+       */
+      stop() {
+          if (this.stopAnimation)
+              this.stopAnimation();
+          this.clearAnimation();
       }
-      const isOriginAnimatable = isAnimatable(key, origin);
-      warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${key} from "${origin}" to "${target}". ${origin} is not an animatable value - to enable this animation set ${origin} to a value animatable to ${target} via the \`style\` property.`);
-      function start() {
-          const options = {
-              from: origin,
-              to: target,
-              velocity: value.getVelocity(),
-              onComplete,
-              onUpdate: (v) => value.set(v),
-          };
-          return valueTransition.type === "inertia" ||
-              valueTransition.type === "decay"
-              ? inertia({ ...options, ...valueTransition })
-              : animate$1({
-                  ...getPopmotionAnimationOptions(valueTransition, options, key),
-                  onUpdate: (v) => {
-                      options.onUpdate(v);
-                      valueTransition.onUpdate && valueTransition.onUpdate(v);
-                  },
-                  onComplete: () => {
-                      options.onComplete();
-                      valueTransition.onComplete && valueTransition.onComplete();
-                  },
-              });
+      /**
+       * Returns `true` if this value is currently animating.
+       *
+       * @public
+       */
+      isAnimating() {
+          return !!this.stopAnimation;
       }
-      function set() {
-          const finalTarget = resolveFinalValueInKeyframes(target);
-          value.set(finalTarget);
-          onComplete();
-          valueTransition.onUpdate && valueTransition.onUpdate(finalTarget);
-          valueTransition.onComplete && valueTransition.onComplete();
-          return { stop: () => { } };
+      clearAnimation() {
+          this.stopAnimation = null;
+      }
+      /**
+       * Destroy and clean up subscribers to this `MotionValue`.
+       *
+       * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+       * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+       * created a `MotionValue` via the `motionValue` function.
+       *
+       * @public
+       */
+      destroy() {
+          this.updateSubscribers.clear();
+          this.renderSubscribers.clear();
+          this.stop();
       }
-      return !isOriginAnimatable ||
-          !isTargetAnimatable ||
-          valueTransition.type === false
-          ? set
-          : start;
-  }
-  function isZero(value) {
-      return (value === 0 ||
-          (typeof value === "string" &&
-              parseFloat(value) === 0 &&
-              value.indexOf(" ") === -1));
-  }
-  function getZeroUnit(potentialUnitType) {
-      return typeof potentialUnitType === "number"
-          ? 0
-          : getAnimatableNone("", potentialUnitType);
-  }
-  function getValueTransition(transition, key) {
-      return transition[key] || transition["default"] || transition;
   }
-  /**
-   * Start animation on a MotionValue. This function is an interface between
-   * Framer Motion and Popmotion
-   */
-  function startAnimation(key, value, target, transition = {}) {
-      if (instantAnimationState.current) {
-          transition = { type: false };
-      }
-      return value.start((onComplete) => {
-          let controls;
-          const animation = getAnimation(key, value, target, transition, onComplete);
-          const delayBy = getDelayFromTransition(transition, key);
-          const start = () => (controls = animation());
-          let cancelDelay;
-          if (delayBy) {
-              cancelDelay = delay(start, secondsToMilliseconds(delayBy));
-          }
-          else {
-              start();
-          }
-          return () => {
-              cancelDelay && cancelDelay();
-              controls && controls.stop();
-          };
-      });
+  function motionValue(init) {
+      return new MotionValue(init);
   }
 
+  const isMotionValue = (value) => !!(value === null || value === void 0 ? void 0 : value.getVelocity);
+
   /**
    * Animate a single value or a `MotionValue`.
    *
@@ -2051,7 +2075,7 @@
    */
   function animate(from, to, transition = {}) {
       const value = isMotionValue(from) ? from : motionValue(from);
-      startAnimation("", value, to, transition);
+      value.start(createMotionValueAnimation("", value, to, transition));
       return {
           stop: () => value.stop(),
           isAnimating: () => value.isAnimating(),
@@ -2595,6 +2619,14 @@
       }
   }
 
+  const isKeyframesTarget = (v) => {
+      return Array.isArray(v);
+  };
+
+  const isCustomValue = (v) => {
+      return Boolean(v && typeof v === "object" && v.mix && v.toValue);
+  };
+
   /**
    * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
    *
@@ -4877,7 +4909,7 @@
                * and warn against mismatches.
                */
               {
-                  warnOnce(nextValue.version === "7.7.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.3 may not work as expected.`);
+                  warnOnce(nextValue.version === "7.8.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.8.1 may not work as expected.`);
               }
           }
           else if (isMotionValue(prevValue)) {