framer-motion 6.5.1 → 7.0.2

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://user-images.githubusercontent.com/22095598/123793419-f5528800-d8e1-11eb-8c5f-e2dad45a9c81.png" width="108" height="108" alt="Framer Motion" />
+  <img src="https://framerusercontent.com/images/48ha9ZR9oZQGQ6gZ8YUfElP3T0A.png" width="50" height="50" alt="Framer Motion Icon" />
 </p>
 <h1 align="center">Framer Motion</h1>
 <h3 align="center">
-  An open source and production-ready motion<br>library for React on the web.
+  An open source motion library for React, <a href="https://www.framer.com">made by Framer</a>.
 </h3>
 
 <br>
@@ -25,7 +25,7 @@
 
 <br>
 
-Framer Motion is an open source, production-ready library that's designed for all creative developers.
+Framer Motion is an open source, production-ready library that’s designed for all creative developers.
 
 It looks like this:
 
@@ -52,10 +52,14 @@ It does all this:
 
 ### 🐇 Quick start
 
+Install `framer-motion` with via your package manager:
+
 ```
 npm install framer-motion
 ```
 
+Then import the `motion` component:
+
 ```jsx
 import { motion } from "framer-motion"
 
@@ -66,18 +70,17 @@ export const MyComponent = ({ isVisible }) => (
 
 ### 📚 Docs
 
-Check out [our documentation](https://www.framer.com/docs/) for guides and a full API reference.
-
-Or checkout [our examples](https://www.framer.com/docs/examples/) for inspiration.
+- Check out [our documentation](https://www.framer.com/docs/) for guides and a full API reference.
+- Or see [our examples](https://www.framer.com/docs/examples/) for inspiration.
 
-### 🛠 Contribute
+### 💎 Contribute
 
-Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
+- Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
 
 ### 👩🏻‍⚖️ License
 
-Framer Motion is MIT licensed.
+- Framer Motion is MIT licensed.
 
-## Framer
+### ✨ Framer
 
-Get on the same page as your designers before production. Get started with [design and prototyping in Framer](https://www.framer.com/).
+- Design and publish sites that inspire. [Try Framer for free](https://www.framer.com/).

package/dist/cjs/index.js

@@ -1929,18 +1929,6 @@ var gestureAnimations = {
     hover: makeRenderlessComponent(useHoverGesture),
 };
 
-var counter = 0;
-var incrementId = function () { return counter++; };
-var useId = function () { return useConstant(incrementId); };
-/**
- * Ideally we'd use the following code to support React 18 optionally.
- * But this fairly fails in Webpack (otherwise treeshaking wouldn't work at all).
- * Need to come up with a different way of figuring this out.
- */
-// export const useId = (React as any).useId
-//     ? (React as any).useId
-//     : () => useConstant(incrementId)
-
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`
  * to access information about whether it's still present in the React tree.
@@ -1972,7 +1960,7 @@ function usePresence() {
     // It's safe to call the following hooks conditionally (after an early return) because the context will always
     // either be null or non-null for the lifespan of the component.
     // Replace with useId when released in React
-    var id = useId();
+    var id = React.useId();
     React.useEffect(function () { return register(id); }, []);
     var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
@@ -2449,7 +2437,7 @@ var MotionValue = /** @class */ (function () {
          * 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 = "6.5.1";
+        this.version = "7.0.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3375,8 +3363,8 @@ var animations = {
  */
 var PanSession = /** @class */ (function () {
     function PanSession(event, handlers, _a) {
-        var _this = this;
         var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;
+        var _this = this;
         /**
          * @internal
          */
@@ -4247,7 +4235,7 @@ var VisualElementDragControls = /** @class */ (function () {
          * If the element's layout changes, calculate the delta and apply that to
          * the drag gesture's origin point.
          */
-        projection.addEventListener("didUpdate", (function (_a) {
+        var stopLayoutUpdateListener = projection.addEventListener("didUpdate", (function (_a) {
             var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged;
             if (_this.isDragging && hasLayoutChanged) {
                 eachAxis(function (axis) {
@@ -4264,6 +4252,7 @@ var VisualElementDragControls = /** @class */ (function () {
             stopResizeListener();
             stopPointerListener();
             stopMeasureLayoutListener();
+            stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
         };
     };
     VisualElementDragControls.prototype.getProps = function () {
@@ -4418,7 +4407,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.5.1", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.5.1 may not work as expected."));
+                warnOnce(nextValue.version === "7.0.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.2 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5257,9 +5246,9 @@ var htmlConfig = {
      * can be animated by Motion.
      */
     makeTargetAnimatable: function (element, _a, _b, isMounted) {
+        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = tslib.__rest(_a, ["transition", "transitionEnd"]);
         var transformValues = _b.transformValues;
         if (isMounted === void 0) { isMounted = true; }
-        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = tslib.__rest(_a, ["transition", "transitionEnd"]);
         var origin = getOrigin(target, transition || {}, element);
         /**
          * If Framer has provided a function to convert `Color` etc value types, convert them
@@ -5919,9 +5908,9 @@ function createProjectionNode(_a) {
     var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
     return /** @class */ (function () {
         function ProjectionNode(id, latestValues, parent) {
-            var _this = this;
             if (latestValues === void 0) { latestValues = {}; }
             if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
+            var _this = this;
             /**
              * A Set containing all this component's children. This is used to iterate
              * through the children.
@@ -7189,7 +7178,7 @@ function useForceUpdate() {
 var PresenceChild = function (_a) {
     var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
     var presenceChildren = useConstant(newChildrenMap);
-    var id = useId();
+    var id = React.useId();
     var context = React.useMemo(function () { return ({
         id: id,
         initial: initial,
@@ -7909,28 +7898,33 @@ function useScroll(_a) {
     return values;
 }
 
+/**
+ * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
+ */
 function useElementScroll(ref) {
     warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
     return useScroll({ container: ref });
 }
 
+/**
+ * @deprecated useViewportScroll is deprecated. Convert to useScroll()
+ */
 function useViewportScroll() {
     warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
     return useScroll();
 }
 
-var getCurrentTime = typeof performance !== "undefined"
-    ? function () { return performance.now(); }
-    : function () { return Date.now(); };
 function useAnimationFrame(callback) {
-    var initialTimestamp = useConstant(getCurrentTime);
+    var initialTimestamp = React.useRef(0);
     var isStatic = React.useContext(MotionConfigContext).isStatic;
     React.useEffect(function () {
         if (isStatic)
             return;
         var provideTimeSinceStart = function (_a) {
             var timestamp = _a.timestamp;
-            callback(timestamp - initialTimestamp);
+            if (!initialTimestamp.current)
+                initialTimestamp.current = timestamp;
+            callback(timestamp - initialTimestamp.current);
         };
         sync__default["default"].update(provideTimeSinceStart, true);
         return function () { return sync.cancelSync.update(provideTimeSinceStart); };

package/dist/es/components/AnimatePresence/PresenceChild.mjs

@@ -1,9 +1,8 @@
 import { __values } from 'tslib';
 import * as React from 'react';
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
-import { useId } from '../../utils/use-id.mjs';
 
 var PresenceChild = function (_a) {
     var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;

package/dist/es/components/AnimatePresence/use-presence.mjs

@@ -1,6 +1,5 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useId, useEffect } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
-import { useId } from '../../utils/use-id.mjs';
 
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`

package/dist/es/context/MotionContext/create.mjs

@@ -1,4 +1,4 @@
-import { useMemo, useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { MotionContext } from './index.mjs';
 import { getCurrentTreeVariants } from './utils.mjs';
 

package/dist/es/gestures/PanSession.mjs

@@ -11,8 +11,8 @@ import { distance, pipe } from 'popmotion';
  */
 var PanSession = /** @class */ (function () {
     function PanSession(event, handlers, _a) {
-        var _this = this;
         var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;
+        var _this = this;
         /**
          * @internal
          */

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -394,7 +394,7 @@ var VisualElementDragControls = /** @class */ (function () {
          * If the element's layout changes, calculate the delta and apply that to
          * the drag gesture's origin point.
          */
-        projection.addEventListener("didUpdate", (function (_a) {
+        var stopLayoutUpdateListener = projection.addEventListener("didUpdate", (function (_a) {
             var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged;
             if (_this.isDragging && hasLayoutChanged) {
                 eachAxis(function (axis) {
@@ -411,6 +411,7 @@ var VisualElementDragControls = /** @class */ (function () {
             stopResizeListener();
             stopPointerListener();
             stopMeasureLayoutListener();
+            stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
         };
     };
     VisualElementDragControls.prototype.getProps = function () {

package/dist/es/gestures/drag/utils/constraints.mjs

@@ -1,5 +1,5 @@
 import { __read } from 'tslib';
-import { clamp, mix, progress } from 'popmotion';
+import { mix, progress, clamp } from 'popmotion';
 import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
 
 /**

package/dist/es/projection/animation/mix-values.mjs

@@ -1,5 +1,5 @@
-import { mix, progress, linear, circOut } from 'popmotion';
-import { px, percent } from 'style-value-types';
+import { mix, progress, circOut, linear } from 'popmotion';
+import { percent, px } from 'style-value-types';
 
 var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 var numBorders = borders.length;

package/dist/es/projection/node/create-projection-node.mjs

@@ -30,9 +30,9 @@ function createProjectionNode(_a) {
     var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
     return /** @class */ (function () {
         function ProjectionNode(id, latestValues, parent) {
-            var _this = this;
             if (latestValues === void 0) { latestValues = {}; }
             if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
+            var _this = this;
             /**
              * A Set containing all this component's children. This is used to iterate
              * through the children.

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,5 +1,5 @@
 import { __assign, __read } from 'tslib';
-import { number, px } from 'style-value-types';
+import { px, number } from 'style-value-types';
 import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.mjs';
 import { invariant } from 'hey-listen';
 import { transformProps } from '../../html/utils/transform.mjs';

package/dist/es/render/html/visual-element.mjs

@@ -71,9 +71,9 @@ var htmlConfig = {
      * can be animated by Motion.
      */
     makeTargetAnimatable: function (element, _a, _b, isMounted) {
+        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
         var transformValues = _b.transformValues;
         if (isMounted === void 0) { isMounted = true; }
-        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
         var origin = getOrigin(target, transition || {}, element);
         /**
          * If Framer has provided a function to convert `Color` etc value types, convert them

package/dist/es/render/utils/motion-values.mjs

@@ -18,7 +18,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.5.1", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.5.1 may not work as expected."));
+                warnOnce(nextValue.version === "7.0.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.2 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/use-animation-frame.mjs

@@ -1,20 +1,18 @@
 import sync, { cancelSync } from 'framesync';
-import { useContext, useEffect } from 'react';
-import { useConstant } from './use-constant.mjs';
+import { useRef, useContext, useEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 
-var getCurrentTime = typeof performance !== "undefined"
-    ? function () { return performance.now(); }
-    : function () { return Date.now(); };
 function useAnimationFrame(callback) {
-    var initialTimestamp = useConstant(getCurrentTime);
+    var initialTimestamp = useRef(0);
     var isStatic = useContext(MotionConfigContext).isStatic;
     useEffect(function () {
         if (isStatic)
             return;
         var provideTimeSinceStart = function (_a) {
             var timestamp = _a.timestamp;
-            callback(timestamp - initialTimestamp);
+            if (!initialTimestamp.current)
+                initialTimestamp.current = timestamp;
+            callback(timestamp - initialTimestamp.current);
         };
         sync.update(provideTimeSinceStart, true);
         return function () { return cancelSync.update(provideTimeSinceStart); };

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ var MotionValue = /** @class */ (function () {
          * 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 = "6.5.1";
+        this.version = "7.0.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/scroll/use-element-scroll.mjs

@@ -1,6 +1,9 @@
 import { warnOnce } from '../../utils/warn-once.mjs';
 import { useScroll } from '../use-scroll.mjs';
 
+/**
+ * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
+ */
 function useElementScroll(ref) {
     warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
     return useScroll({ container: ref });

package/dist/es/value/scroll/use-viewport-scroll.mjs

@@ -1,6 +1,9 @@
 import { warnOnce } from '../../utils/warn-once.mjs';
 import { useScroll } from '../use-scroll.mjs';
 
+/**
+ * @deprecated useViewportScroll is deprecated. Convert to useScroll()
+ */
 function useViewportScroll() {
     warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
     return useScroll();