framer-motion 6.0.0 → 6.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "6.0.0",
+    "version": "6.2.1",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -36,16 +36,23 @@
         "build": "yarn clean && tsc -p . && rollup -c && webpack --config webpack.size.config.js",
         "dev": "yarn watch",
         "clean": "rm -rf types dist lib",
-        "test": "yarn build && yarn measure && yarn test-server && yarn test-client",
-        "test-ci": "yarn test-client --ci --reporters=jest-junit && yarn test-server --ci --reporters=jest-junit",
+        "test": "yarn test-server && yarn test-client",
+        "test-ci": "yarn test",
         "test-client": "jest --coverage --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-projection": "yarn run collect-projection-tests && start-server-and-test 'python -m SimpleHTTPServer' http://0.0.0.0:8000 'yarn run 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-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-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\"",
         "prepack": "yarn build",
         "postpublish": "git push --tags",
-        "measure": "bundlesize"
+        "measure": "bundlesize",
+        "start-dev-server": "webpack serve --config ../../dev/webpack/config.js --hot"
     },
     "peerDependencies": {
         "react": ">=16.8 || ^17.0.0",
@@ -64,32 +71,32 @@
     "bundlesize": [
         {
             "path": "./dist/framer-motion.js",
-            "maxSize": "35.3 kB"
+            "maxSize": "35.5 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
-            "maxSize": "6.1 kB"
+            "maxSize": "6.4 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "16.9 kB"
+            "maxSize": "17 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "28 kB"
+            "maxSize": "28.1 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
-            "maxSize": "6.4 kB"
+            "maxSize": "6.7 kB"
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "19.4 kB"
+            "maxSize": "19.5 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
             "maxSize": "31.5 kB"
         }
     ],
-    "gitHead": "e655edf09c72fbff16f5445e7ae17236c0e10405"
+    "gitHead": "ff23f073c81147dd4debbccb8fbcf48eda08f24a"
 }

package/types/context/MotionConfigContext.d.ts

@@ -22,6 +22,13 @@ export interface MotionConfigContext {
      * @public
      */
     transition?: Transition;
+    /**
+     * If true, will respect the device prefersReducedMotion setting by switching
+     * transform animations off.
+     *
+     * @public
+     */
+    reducedMotion?: "always" | "never" | "user";
 }
 /**
  * @public

package/types/motion/features/viewport/types.d.ts

@@ -7,6 +7,7 @@ export interface ViewportOptions {
     once?: boolean;
     margin?: string;
     amount?: "some" | "all" | number;
+    fallback?: boolean;
 }
 export interface ViewportProps {
     whileInView?: VariantLabels | TargetAndTransition;

package/types/render/html/visual-element.d.ts

@@ -3,4 +3,4 @@ import { VisualElementConfig } from "../types";
 import { DOMVisualElementOptions } from "../dom/types";
 export declare function getComputedStyle(element: HTMLElement): CSSStyleDeclaration;
 export declare const htmlConfig: VisualElementConfig<HTMLElement, HTMLRenderState, DOMVisualElementOptions>;
-export declare const htmlVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, }: import("../types").VisualElementOptions<HTMLElement, any>, options?: DOMVisualElementOptions) => import("../types").VisualElement<HTMLElement, any>;
+export declare const htmlVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }: import("../types").VisualElementOptions<HTMLElement, any>, options?: DOMVisualElementOptions) => import("../types").VisualElement<HTMLElement, any>;

package/types/render/index.d.ts

@@ -1,2 +1,2 @@
 import { VisualElement, VisualElementConfig, VisualElementOptions } from "./types";
-export declare const visualElement: <Instance, MutableState, Options>({ treeType, build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }: VisualElementConfig<Instance, MutableState, Options>) => ({ parent, props, presenceId, blockInitialAnimation, visualState, }: VisualElementOptions<Instance, any>, options?: Options) => VisualElement<Instance, any>;
+export declare const visualElement: <Instance, MutableState, Options>({ treeType, build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }: VisualElementConfig<Instance, MutableState, Options>) => ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }: VisualElementOptions<Instance, any>, options?: Options) => VisualElement<Instance, any>;

package/types/render/svg/visual-element.d.ts

@@ -1,2 +1,2 @@
 import { DOMVisualElementOptions } from "../dom/types";
-export declare const svgVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, }: import("../types").VisualElementOptions<SVGElement, any>, options?: DOMVisualElementOptions) => import("../types").VisualElement<SVGElement, any>;
+export declare const svgVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }: import("../types").VisualElementOptions<SVGElement, any>, options?: DOMVisualElementOptions) => import("../types").VisualElement<SVGElement, any>;

package/types/render/types.d.ts

@@ -32,6 +32,7 @@ export interface VisualElement<Instance = any, RenderState = any> extends Lifecy
     measureViewportBox(withTransform?: boolean): Box;
     addVariantChild(child: VisualElement): undefined | (() => void);
     getClosestVariantNode(): VisualElement | undefined;
+    shouldReduceMotion?: boolean | null;
     animateMotionValue?: typeof startAnimation;
     projection?: IProjectionNode;
     /**
@@ -101,6 +102,7 @@ export declare type VisualElementOptions<Instance, RenderState = any> = {
     presenceId?: number | undefined;
     props: MotionProps;
     blockInitialAnimation?: boolean;
+    shouldReduceMotion?: boolean | null;
 };
 export declare type CreateVisualElement<Instance> = (Component: string | React.ComponentType, options: VisualElementOptions<Instance>) => VisualElement<Instance>;
 /**

package/types/utils/use-reduced-motion.d.ts

@@ -25,3 +25,4 @@
  * @public
  */
 export declare function useReducedMotion(): boolean | null;
+export declare function useReducedMotionConfig(): boolean | null;