Export motion from wordpress/components as __unstable

packages/components/package.json

@@ -52,7 +52,7 @@
 		"classnames": "^2.3.1",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
-		"framer-motion": "^4.1.3",
+		"framer-motion": "^4.1.17",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
 		"lodash": "^4.17.21",

packages/components/src/animation/index.js

@@ -0,0 +1,13 @@
+/**
+ * Framer Motion is used to create animated, interactive interfaces. The package is roughly ~30kb so
+ * this should ideally be loaded once across all Gutenberg packages. To give ourselves more flexibility
+ * in trying animation options, we avoid making this public API.
+ *
+ * @see https://www.framer.com/docs/animation/
+ */
+
+export {
+	motion as __unstableMotion,
+	AnimatePresence as __unstableAnimatePresence,
+	AnimateSharedLayout as __unstableAnimateSharedLayout,
+} from 'framer-motion';

packages/components/src/index.js

@@ -16,6 +16,11 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
+export {
+	__unstableMotion,
+	__unstableAnimatePresence,
+	__unstableAnimateSharedLayout,
+} from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,

packages/components/src/snackbar/list.js

@@ -3,7 +3,6 @@
  */
 import classnames from 'classnames';
 import { omit, noop } from 'lodash';
-import { motion, AnimatePresence } from 'framer-motion';
 
 /**
  * WordPress dependencies
@@ -14,6 +13,10 @@ import { useReducedMotion } from '@wordpress/compose';
  * Internal dependencies
  */
 import Snackbar from './';
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '../animation';
 
 const SNACKBAR_VARIANTS = {
 	init: {

packages/edit-post/package.json

@@ -53,7 +53,6 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/warning": "file:../warning",
 		"classnames": "^2.3.1",
-		"framer-motion": "^4.1.3",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"rememo": "^3.0.0",

packages/edit-post/src/components/visual-editor/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { motion } from 'framer-motion';
 
 /**
  * WordPress dependencies
@@ -32,7 +31,7 @@ import {
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 } from '@wordpress/block-editor';
 import { useRef, useMemo } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import { Button, __unstableMotion as motion } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
 import { arrowLeft } from '@wordpress/icons';