framer-motion 7.7.3 → 7.8.1

package/dist/three-entry.d.ts

@@ -2,135 +2,9 @@
 import * as React$1 from 'react';
 import { SVGAttributes, CSSProperties, RefObject, useEffect } from 'react';
 
-/**
- * @public
- */
-declare type Subscriber<T> = (v: T) => void;
-/**
- * `MotionValue` is used to track the state and velocity of motion values.
- *
- * @public
- */
-declare class MotionValue<V = any> {
-    /**
-     * 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.
-     */
-    version: string;
-    /**
-     * 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: Subscriber<V>): () => void;
-    clearListeners(): void;
-    /**
-     * 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: V, render?: boolean): void;
-    updateAndNotify: (v: V, render?: boolean) => void;
-    /**
-     * Returns the latest state of `MotionValue`
-     *
-     * @returns - The latest state of `MotionValue`
-     *
-     * @public
-     */
-    get(): V;
-    /**
-     * @public
-     */
-    getPrevious(): V;
-    /**
-     * Returns the latest velocity of `MotionValue`
-     *
-     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-     *
-     * @public
-     */
-    getVelocity(): number;
-    hasAnimated: boolean;
-    /**
-     * Stop the currently active animation.
-     *
-     * @public
-     */
-    stop(): void;
-    /**
-     * Returns `true` if this value is currently animating.
-     *
-     * @public
-     */
-    isAnimating(): boolean;
-    private clearAnimation;
-    /**
-     * 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(): void;
-}
-
 declare type EasingFunction = (v: number) => number;
+declare type BezierDefinition = [number, number, number, number];
+declare type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 /**
  * The easing function to use. Set as one of:
  *
@@ -140,7 +14,7 @@ declare type EasingFunction = (v: number) => number;
  *
  * @public
  */
-declare type Easing = [number, number, number, number] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | EasingFunction;
+declare type Easing = EasingDefinition | EasingFunction;
 
 /**
  * Options for orchestrating the timing of animations.
@@ -978,67 +852,11 @@ interface CustomValueType {
     toValue: () => number | string;
 }
 
-/**
- * @public
- */
-declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
-/**
- * @public
- */
-interface AnimationControls {
-    /**
-     * Starts an animation on all linked components.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * controls.start("variantLabel")
-     * controls.start({
-     *   x: 0,
-     *   transition: { duration: 1 }
-     * })
-     * ```
-     *
-     * @param definition - Properties or variant label to animate to
-     * @param transition - Optional `transtion` to apply to a variant
-     * @returns - A `Promise` that resolves when all animations have completed.
-     *
-     * @public
-     */
-    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
-    /**
-     * Instantly set to a set of properties or a variant.
-     *
-     * ```jsx
-     * // With properties
-     * controls.set({ opacity: 0 })
-     *
-     * // With variants
-     * controls.set("hidden")
-     * ```
-     *
-     * @privateRemarks
-     * We could perform a similar trick to `.start` where this can be called before mount
-     * and we maintain a list of of pending actions that get applied on mount. But the
-     * expectation of `set` is that it happens synchronously and this would be difficult
-     * to do before any children have even attached themselves. It's also poor practise
-     * and we should discourage render-synchronous `.start` calls rather than lean into this.
-     *
-     * @public
-     */
-    set(definition: ControlsAnimationDefinition): void;
-    /**
-     * Stops animations on all linked components.
-     *
-     * ```jsx
-     * controls.stop()
-     * ```
-     *
-     * @public
-     */
-    stop(): void;
-    mount(): () => void;
-}
+declare type FrameData = {
+    delta: number;
+    timestamp: number;
+};
+declare type Process = (data: FrameData) => void;
 
 interface Point {
     x: number;
@@ -1070,110 +888,29 @@ interface Delta {
 }
 declare type TransformPoint = (point: Point) => Point;
 
+declare type ReducedMotionConfig = "always" | "never" | "user";
 /**
- * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
- * information about the current state of the tap gesture such as its
- * `point`, `delta`, `offset` and `velocity`.
- *
- * ```jsx
- * <motion.div onPan={(event, info) => {
- *   console.log(info.point.x, info.point.y)
- * }} />
- * ```
- *
  * @public
  */
-interface PanInfo {
+interface MotionConfigContext {
     /**
-     * Contains `x` and `y` values for the current pan position relative
-     * to the device or page.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.point.x, info.point.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
+     * Internal, exported only for usage in Framer
      */
-    point: Point;
+    transformPagePoint: TransformPoint;
     /**
-     * Contains `x` and `y` values for the distance moved since
-     * the last event.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.delta.x, info.delta.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
+     * Internal. Determines whether this is a static context ie the Framer canvas. If so,
+     * it'll disable all dynamic functionality.
      */
-    delta: Point;
+    isStatic: boolean;
     /**
-     * Contains `x` and `y` values for the distance moved from
-     * the first pan event.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.offset.x, info.offset.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
+     * Defines a new default transition for the entire tree.
      *
      * @public
      */
-    offset: Point;
+    transition?: Transition;
     /**
-     * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.velocity.x, info.velocity.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
-     */
-    velocity: Point;
-}
-
-declare type FrameData = {
-    delta: number;
-    timestamp: number;
-};
-declare type Process = (data: FrameData) => void;
-
-declare type ReducedMotionConfig = "always" | "never" | "user";
-/**
- * @public
- */
-interface MotionConfigContext {
-    /**
-     * Internal, exported only for usage in Framer
-     */
-    transformPagePoint: TransformPoint;
-    /**
-     * Internal. Determines whether this is a static context ie the Framer canvas. If so,
-     * it'll disable all dynamic functionality.
-     */
-    isStatic: boolean;
-    /**
-     * Defines a new default transition for the entire tree.
-     *
-     * @public
-     */
-    transition?: Transition;
-    /**
-     * If true, will respect the device prefersReducedMotion setting by switching
-     * transform animations off.
+     * If true, will respect the device prefersReducedMotion setting by switching
+     * transform animations off.
      *
      * @public
      */
@@ -1723,6 +1460,276 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
     notify<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, ...args: any): void;
 }
 
+/**
+ * @public
+ */
+declare type Subscriber<T> = (v: T) => void;
+/**
+ * `MotionValue` is used to track the state and velocity of motion values.
+ *
+ * @public
+ */
+declare class MotionValue<V = any> {
+    /**
+     * 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.
+     */
+    version: string;
+    /**
+     * If a MotionValue has an owner, it was created internally within Framer Motion
+     * and therefore has no external listeners. It is therefore safe to animate via WAAPI.
+     */
+    owner?: VisualElement;
+    /**
+     * 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: Subscriber<V>): () => void;
+    clearListeners(): void;
+    /**
+     * 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: V, render?: boolean): void;
+    updateAndNotify: (v: V, render?: boolean) => void;
+    /**
+     * Returns the latest state of `MotionValue`
+     *
+     * @returns - The latest state of `MotionValue`
+     *
+     * @public
+     */
+    get(): V;
+    /**
+     * @public
+     */
+    getPrevious(): V;
+    /**
+     * Returns the latest velocity of `MotionValue`
+     *
+     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+     *
+     * @public
+     */
+    getVelocity(): number;
+    hasAnimated: boolean;
+    /**
+     * Stop the currently active animation.
+     *
+     * @public
+     */
+    stop(): void;
+    /**
+     * Returns `true` if this value is currently animating.
+     *
+     * @public
+     */
+    isAnimating(): boolean;
+    private clearAnimation;
+    /**
+     * 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(): void;
+}
+
+/**
+ * @public
+ */
+declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
+/**
+ * @public
+ */
+interface AnimationControls {
+    /**
+     * Starts an animation on all linked components.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * controls.start("variantLabel")
+     * controls.start({
+     *   x: 0,
+     *   transition: { duration: 1 }
+     * })
+     * ```
+     *
+     * @param definition - Properties or variant label to animate to
+     * @param transition - Optional `transtion` to apply to a variant
+     * @returns - A `Promise` that resolves when all animations have completed.
+     *
+     * @public
+     */
+    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
+    /**
+     * Instantly set to a set of properties or a variant.
+     *
+     * ```jsx
+     * // With properties
+     * controls.set({ opacity: 0 })
+     *
+     * // With variants
+     * controls.set("hidden")
+     * ```
+     *
+     * @privateRemarks
+     * We could perform a similar trick to `.start` where this can be called before mount
+     * and we maintain a list of of pending actions that get applied on mount. But the
+     * expectation of `set` is that it happens synchronously and this would be difficult
+     * to do before any children have even attached themselves. It's also poor practise
+     * and we should discourage render-synchronous `.start` calls rather than lean into this.
+     *
+     * @public
+     */
+    set(definition: ControlsAnimationDefinition): void;
+    /**
+     * Stops animations on all linked components.
+     *
+     * ```jsx
+     * controls.stop()
+     * ```
+     *
+     * @public
+     */
+    stop(): void;
+    mount(): () => void;
+}
+
+/**
+ * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
+ * information about the current state of the tap gesture such as its
+ * `point`, `delta`, `offset` and `velocity`.
+ *
+ * ```jsx
+ * <motion.div onPan={(event, info) => {
+ *   console.log(info.point.x, info.point.y)
+ * }} />
+ * ```
+ *
+ * @public
+ */
+interface PanInfo {
+    /**
+     * Contains `x` and `y` values for the current pan position relative
+     * to the device or page.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    point: Point;
+    /**
+     * Contains `x` and `y` values for the distance moved since
+     * the last event.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.delta.x, info.delta.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    delta: Point;
+    /**
+     * Contains `x` and `y` values for the distance moved from
+     * the first pan event.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.offset.x, info.offset.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    offset: Point;
+    /**
+     * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.velocity.x, info.velocity.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    velocity: Point;
+}
+
 interface DragControlOptions {
     snapToCursor?: boolean;
     cursorProgress?: Point;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "7.7.3",
+    "version": "7.8.1",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -42,11 +42,13 @@
         "test-client": "jest --config jest.config.json --max-workers=2",
         "test-server": "jest --config jest.config.ssr.json ",
         "test-watch": "jest --watch --coverage --coverageReporters=lcov --config jest.config.json",
+        "test-appear": "yarn run collect-appear-tests && start-server-and-test 'pushd ../../; python -m SimpleHTTPServer; popd' http://0.0.0.0:8000 'cypress run -s cypress/integration/appear.chrome.ts --config baseUrl=http://localhost:8000/'",
         "test-projection": "yarn run collect-projection-tests && start-server-and-test 'pushd ../../; python -m SimpleHTTPServer; popd' http://0.0.0.0:8000 'cypress run -s cypress/integration/projection.chrome.ts --config baseUrl=http://localhost:8000/'",
         "test-e2e-chrome": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --browser chrome  --spec \"cypress/integration/layout-relative.chrome.ts\"'",
         "test-e2e-electron": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --config ignoreTestFiles=*.chrome.ts'",
-        "test-e2e": "yarn test-projection && yarn test-e2e-electron",
+        "test-e2e": "yarn test-appear && yarn test-projection && yarn test-e2e-electron",
         "test-e2e-file": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --spec \"cypress/integration/while-in-view.ts\"'",
+        "collect-appear-tests": "node ../../dev/optimized-appear/collect-appear-tests.js",
         "collect-projection-tests": "node ../../dev/projection/collect-projection-tests.js",
         "prettier": "prettier ./src/* --write",
         "watch": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"",
@@ -60,7 +62,7 @@
         "react-dom": "^18.0.0"
     },
     "dependencies": {
-        "@motionone/dom": "10.13.1",
+        "@motionone/dom": "^10.15.3",
         "hey-listen": "^1.0.8",
         "tslib": "2.4.0"
     },
@@ -70,7 +72,7 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "28.86 kB"
+            "maxSize": "28.98 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
@@ -78,11 +80,11 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.07 kB"
+            "maxSize": "14.21kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "24.8 kB"
+            "maxSize": "24.9 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
@@ -90,12 +92,12 @@
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "18.27 kB"
+            "maxSize": "18.39 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "29.84 kB"
+            "maxSize": "29.96kB"
         }
     ],
-    "gitHead": "8410d2ec4dde0c3e59545e9937e6634952a80bdb"
+    "gitHead": "3a1308e2002989be77283c1ca977e0b08fdc85f2"
 }