framer-motion 5.1.0 → 5.3.0

package/package.json

@@ -1,166 +1,166 @@
 {
-    "name": "framer-motion",
-    "version": "5.1.0",
-    "description": "A simple and powerful React animation library",
-    "main": "dist/framer-motion.cjs.js",
-    "module": "dist/es/index.mjs",
-    "exports": {
-        ".": {
-            "require": "./dist/framer-motion.cjs.js",
-            "import": "./dist/es/index.mjs",
-            "default": "./dist/framer-motion.cjs.js"
-        },
-        "./package.json": "./package.json"
+  "name": "framer-motion",
+  "version": "5.3.0",
+  "description": "A simple and powerful React animation library",
+  "main": "dist/framer-motion.cjs.js",
+  "module": "dist/es/index.mjs",
+  "exports": {
+    ".": {
+      "require": "./dist/framer-motion.cjs.js",
+      "import": "./dist/es/index.mjs",
+      "default": "./dist/framer-motion.cjs.js"
     },
-    "types": "types/index.d.ts",
-    "author": "Framer",
-    "license": "MIT",
-    "repository": "https://github.com/framer/motion/",
-    "sideEffects": false,
-    "keywords": [
-        "react animation",
-        "react",
-        "pose",
-        "react pose",
-        "animation",
-        "gestures",
-        "drag",
-        "spring",
-        "popmotion",
-        "framer"
-    ],
-    "scripts": {
-        "lint": "yarn eslint src/**/*.ts",
-        "test": "yarn build && yarn test-server && yarn test-client && yarn test-projection && yarn test-e2e && yarn measure",
-        "build": "yarn clean && tsc -p . && rollup -c",
-        "clean": "rm -rf types dist lib",
-        "test-ci": "yarn test-client && yarn test-server",
-        "test-client": "jest --coverage --config jest.config.json --max-workers=2",
-        "test-server": "jest --config jest.config.ssr.json",
-        "test-projection": "yarn run collect-projection-tests && start-server-and-test 'python -m SimpleHTTPServer' http://localhost:8000 'yarn run cypress run -s cypress/integration/projection.chrome.ts --config baseUrl=http://0.0.0.0: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-chrome && yarn test-e2e-electron",
-        "test-e2e-file": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --spec \"cypress/integration/drag-framer-page.ts\"'",
-        "test-watch": "jest --watch --coverage --coverageReporters=lcov  --config jest.config.json",
-        "projection-dev": "python -m SimpleHTTPServer",
-        "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",
-        "prepublishOnly": "yarn test",
-        "postpublish": "git push --tags",
-        "measure": "webpack --config webpack.size.config.js && bundlesize",
-        "start-dev-server": "webpack serve --config dev/webpack/config.js --hot"
+    "./package.json": "./package.json"
+  },
+  "types": "types/index.d.ts",
+  "author": "Framer",
+  "license": "MIT",
+  "repository": "https://github.com/framer/motion/",
+  "sideEffects": false,
+  "keywords": [
+    "react animation",
+    "react",
+    "pose",
+    "react pose",
+    "animation",
+    "gestures",
+    "drag",
+    "spring",
+    "popmotion",
+    "framer"
+  ],
+  "scripts": {
+    "lint": "yarn eslint src/**/*.ts",
+    "test": "yarn build && yarn test-server && yarn test-client && yarn test-projection && yarn test-e2e && yarn measure",
+    "build": "yarn clean && tsc -p . && rollup -c",
+    "clean": "rm -rf types dist lib",
+    "test-ci": "yarn test-client && yarn test-server",
+    "test-client": "jest --coverage --config jest.config.json --max-workers=2",
+    "test-server": "jest --config jest.config.ssr.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-chrome && 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\"'",
+    "test-watch": "jest --watch --coverage --coverageReporters=lcov  --config jest.config.json",
+    "projection-dev": "python -m SimpleHTTPServer",
+    "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",
+    "prepublishOnly": "yarn test",
+    "postpublish": "git push --tags",
+    "measure": "webpack --config webpack.size.config.js && bundlesize",
+    "start-dev-server": "webpack serve --config dev/webpack/config.js --hot"
+  },
+  "peerDependencies": {
+    "react": ">=16.8 || ^17.0.0",
+    "react-dom": ">=16.8 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@cypress/webpack-preprocessor": "^4.1.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "@rollup/plugin-replace": "^2.3.2",
+    "@testing-library/dom": "^6.10.1",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/react-hooks": "^5.1.0",
+    "@types/jest": "^23.3.9",
+    "@types/node": "12.7.4",
+    "@types/react": "17.0.9",
+    "@types/react-dom": "17.0.6",
+    "@types/styled-components": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^1.5.0",
+    "@typescript-eslint/parser": "^1.5.0",
+    "bundlesize": "^0.18.0",
+    "cache-loader": "^1.2.5",
+    "concurrently": "^5.2.0",
+    "convert-tsconfig-paths-to-webpack-aliases": "^0.9.2",
+    "cypress": "^3.4.0",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.6.0",
+    "fork-ts-checker-webpack-plugin": "^6.2.0",
+    "husky": "1.1.4",
+    "jest": "^24.8.0",
+    "jest-dom": "^3.5.0",
+    "jest-junit": "^6.4.0",
+    "jest-watch-typeahead": "^0.4.2",
+    "lint-staged": "^8.0.4",
+    "lodash": "^4.17.13",
+    "path-browserify": "^1.0.1",
+    "prettier": "^2.1.0",
+    "react": "^17.0.0-rc.0",
+    "react-dev-utils": "^11.0.4",
+    "react-dom": "^17.0.0-rc.0",
+    "react-refresh": "^0.9.0",
+    "rollup": "^2.10.5",
+    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-visualizer": "^2.4.3",
+    "start-server-and-test": "^1.9.1",
+    "styled-components": "^4.1.1",
+    "ts-jest": "^24.0.2",
+    "ts-loader": "^5.3.0",
+    "type-fest": "^1.0.1",
+    "typescript": "^4.2.3",
+    "webpack": "^5.27.2",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2",
+    "yarn-deduplicate": "^1.1.1"
+  },
+  "dependencies": {
+    "framesync": "6.0.1",
+    "hey-listen": "^1.0.8",
+    "popmotion": "11.0.0",
+    "style-value-types": "5.0.0",
+    "tslib": "^2.1.0"
+  },
+  "optionalDependencies": {
+    "@emotion/is-prop-valid": "^0.8.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "linters": {
+      "*.{ts,tsx}": [
+        "prettier --write",
+        "git add"
+      ]
+    }
+  },
+  "bundlesize": [
+    {
+      "path": "./dist/framer-motion.js",
+      "maxSize": "34.7 kB"
     },
-    "peerDependencies": {
-        "react": ">=16.8 || ^17.0.0",
-        "react-dom": ">=16.8 || ^17.0.0"
+    {
+      "path": "./dist/size-rollup-m.js",
+      "maxSize": "6.0 kB"
     },
-    "devDependencies": {
-        "@cypress/webpack-preprocessor": "^4.1.0",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-        "@rollup/plugin-node-resolve": "^8.0.0",
-        "@rollup/plugin-replace": "^2.3.2",
-        "@testing-library/dom": "^6.10.1",
-        "@testing-library/react": "^9.3.2",
-        "@testing-library/react-hooks": "^5.1.0",
-        "@types/jest": "^23.3.9",
-        "@types/node": "12.7.4",
-        "@types/react": "17.0.9",
-        "@types/react-dom": "17.0.6",
-        "@types/styled-components": "^4.1.0",
-        "@typescript-eslint/eslint-plugin": "^1.5.0",
-        "@typescript-eslint/parser": "^1.5.0",
-        "bundlesize": "^0.18.0",
-        "cache-loader": "^1.2.5",
-        "concurrently": "^5.2.0",
-        "convert-tsconfig-paths-to-webpack-aliases": "^0.9.2",
-        "cypress": "^3.4.0",
-        "eslint": "^5.16.0",
-        "eslint-config-prettier": "^4.1.0",
-        "eslint-plugin-import": "^2.16.0",
-        "eslint-plugin-react": "^7.12.4",
-        "eslint-plugin-react-hooks": "^1.6.0",
-        "fork-ts-checker-webpack-plugin": "^6.2.0",
-        "husky": "1.1.4",
-        "jest": "^24.8.0",
-        "jest-dom": "^3.5.0",
-        "jest-junit": "^6.4.0",
-        "jest-watch-typeahead": "^0.4.2",
-        "lint-staged": "^8.0.4",
-        "lodash": "^4.17.13",
-        "path-browserify": "^1.0.1",
-        "prettier": "^2.1.0",
-        "react": "^17.0.0-rc.0",
-        "react-dev-utils": "^11.0.4",
-        "react-dom": "^17.0.0-rc.0",
-        "react-refresh": "^0.9.0",
-        "rollup": "^2.10.5",
-        "rollup-plugin-terser": "^5.3.0",
-        "rollup-plugin-visualizer": "^2.4.3",
-        "start-server-and-test": "^1.9.1",
-        "styled-components": "^4.1.1",
-        "ts-jest": "^24.0.2",
-        "ts-loader": "^5.3.0",
-        "type-fest": "^1.0.1",
-        "typescript": "^4.2.3",
-        "webpack": "^5.27.2",
-        "webpack-cli": "^4.5.0",
-        "webpack-dev-server": "^3.11.2",
-        "yarn-deduplicate": "^1.1.1"
+    {
+      "path": "./dist/size-rollup-dom-animation.js",
+      "maxSize": "16.9 kB"
     },
-    "dependencies": {
-        "framesync": "6.0.1",
-        "hey-listen": "^1.0.8",
-        "popmotion": "10.0.2",
-        "style-value-types": "5.0.0",
-        "tslib": "^2.1.0"
+    {
+      "path": "./dist/size-rollup-dom-max.js",
+      "maxSize": "27.8 kB"
     },
-    "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
+    {
+      "path": "./dist/size-webpack-m.js",
+      "maxSize": "6.3 kB"
     },
-    "husky": {
-        "hooks": {
-            "pre-commit": "lint-staged"
-        }
+    {
+      "path": "./dist/size-webpack-dom-animation.js",
+      "maxSize": "19.3 kB"
     },
-    "lint-staged": {
-        "linters": {
-            "*.{ts,tsx}": [
-                "prettier --write",
-                "git add"
-            ]
-        }
-    },
-    "bundlesize": [
-        {
-            "path": "./dist/framer-motion.js",
-            "maxSize": "34 kB"
-        },
-        {
-            "path": "./dist/size-rollup-m.js",
-            "maxSize": "6.5 kB"
-        },
-        {
-            "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "17 kB"
-        },
-        {
-            "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "28.1 kB"
-        },
-        {
-            "path": "./dist/size-webpack-m.js",
-            "maxSize": "6.5 kB"
-        },
-        {
-            "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "19 kB"
-        },
-        {
-            "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "30.3 kB"
-        }
-    ]
-}
+    {
+      "path": "./dist/size-webpack-dom-max.js",
+      "maxSize": "31 kB"
+    }
+  ]
+}

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

@@ -16,6 +16,7 @@ export declare type FeatureNames = {
     focus: true;
     hover: true;
     pan: true;
+    inView: true;
     measureLayout: true;
 };
 export declare type FeatureComponent = React.ComponentType<FeatureProps>;
@@ -34,6 +35,7 @@ export interface FeatureComponents {
     focus?: FeatureComponent;
     hover?: FeatureComponent;
     pan?: FeatureComponent;
+    inView?: FeatureComponent;
     measureLayout?: FeatureComponent;
 }
 export interface FeatureBundle extends FeatureComponents {

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

@@ -0,0 +1,3 @@
+declare type IntersectionHandler = (entry: IntersectionObserverEntry) => void;
+export declare function observeIntersection(element: Element, options: IntersectionObserverInit, callback: IntersectionHandler): () => void;
+export {};

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

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+import { TargetAndTransition } from "../../../types";
+import { VariantLabels } from "../../types";
+export declare type ViewportEventHandler = () => void;
+export interface ViewportOptions {
+    root?: RefObject<Element>;
+    once?: boolean;
+    margin?: string;
+    amount?: "some" | "all" | number;
+}
+export interface ViewportProps {
+    whileInView?: VariantLabels | TargetAndTransition;
+    onViewportEnter?: ViewportEventHandler;
+    onViewportLeave?: ViewportEventHandler;
+    viewport?: ViewportOptions;
+}
+export declare type ViewportState = {
+    hasEnteredView: boolean;
+    isInView: boolean;
+};

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

@@ -0,0 +1,2 @@
+import { FeatureProps } from "../types";
+export declare function useViewport({ visualElement, whileInView, onViewportEnter, onViewportLeave, viewport, }: FeatureProps): void;

package/types/motion/types.d.ts

@@ -7,6 +7,7 @@ import { LayoutProps } from "./features/layout/types";
 import { ResolvedValues } from "../render/types";
 import { VisualElementLifecycles } from "../render/utils/lifecycles";
 import { PanHandlers, TapHandlers, HoverHandlers, FocusHandlers } from "../gestures/types";
+import { ViewportProps } from "./features/viewport/types";
 export declare type MotionStyleProp = string | number | MotionValue;
 /**
  * Either a string, or array of strings, that reference variants defined via the `variants` prop.
@@ -206,7 +207,7 @@ export interface MotionAdvancedProps {
  *
  * @public
  */
-export interface MotionProps extends AnimationProps, VisualElementLifecycles, PanHandlers, TapHandlers, HoverHandlers, FocusHandlers, DraggableProps, LayoutProps, MotionAdvancedProps {
+export interface MotionProps extends AnimationProps, VisualElementLifecycles, PanHandlers, TapHandlers, HoverHandlers, FocusHandlers, ViewportProps, DraggableProps, LayoutProps, MotionAdvancedProps {
     /**
      * Properties, variant label or array of variant labels to start in.
      *

package/types/render/utils/types.d.ts

@@ -4,5 +4,6 @@ export declare enum AnimationType {
     Tap = "whileTap",
     Drag = "whileDrag",
     Focus = "whileFocus",
+    InView = "whileInView",
     Exit = "exit"
 }

package/types/utils/warn-once.d.ts

@@ -0,0 +1,2 @@
+export declare function hasWarned(message: string): boolean;
+export declare function warnOnce(condition: boolean, message: string, element?: Element): void;