Components: remove Framer Motion

[DaniGuardiola]

This is a tracking issue. There has been some discussion of removing Framer Motion (the use of motion especially), citing a few arguments:

• It's chunky: just the motion component is 40.2kb or about x13 production reacts (all gzipped and minified!).
• Pure CSS animations are more performant.
• CSS is advanced enough to make most animation use-cases simple enough to implement and maintain.
• Often, it costs more effort than just implementing the vanilla CSS alternative.
• It seems like it won't support React 19 for a good while, as the maintainers have run into a lot of trouble

Current situation

Framer Motion is wrapped in the components package (packages/components/src/animation/index.tsx). A few utilities are re-exported from it, including the motion component.

Those wrappers are then used both internally and externally in a few places. This issue tracks those instances as we transition out of them.

Strategy

A good start would be removing all instance of internal usage within the components package.

In a second stage, external uses within Gutenberg could be removed as well.

Then, we should set the component as deprecated and nudge potential consumers (if any) towards either using CSS directly (preferred), using a lightweight alternative like motion.dev, or at least using framer-motion directly, as we don't want to officially support it anymore from the components package.

Finally, the re-exports should be deleted, or if we feel like an intermediate phase is useful, replaced by mock functions that throw errors asking users to migrate before completely deleting a few versions after.

Internal instances

• DropZone (Components: Remove Framer Motion from DropZone #62044 in progress by @fullofcaffeine)

  gutenberg/packages/components/src/drop-zone/index.tsx

  Lines 21 to 24 in e8878c1

  	import {
  	__unstableMotion as motion,
  	__unstableAnimatePresence as AnimatePresence,
  	} from '../animation';

• Snackbar

  gutenberg/packages/components/src/snackbar/list.tsx

  Lines 16 to 19 in e8878c1

  	import {
  	__unstableMotion as motion,
  	__unstableAnimatePresence as AnimatePresence,
  	} from '../animation';

• Popover

  gutenberg/packages/components/src/popover/utils.ts

  Line 5 in e8878c1

  import type { MotionProps } from 'framer-motion';

• ToggleGroupControl

  gutenberg/packages/components/src/toggle-group-control/toggle-group-control/component.tsx

  Line 6 in e8878c1

  import { LayoutGroup } from 'framer-motion';

  gutenberg/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx

  Line 8 in e8878c1

  import { motion } from 'framer-motion';

External instances

• block-editor
  • BlockInspector

    gutenberg/packages/block-editor/src/components/block-inspector/index.js

    Line 10 in e8878c1

    import { PanelBody, __unstableMotion as motion } from '@wordpress/components';

  • BlockDropZonePopover

    gutenberg/packages/block-editor/src/components/block-popover/drop-zone.js

    Line 6 in e8878c1

    import { __unstableMotion as motion } from '@wordpress/components';

  • InbetweenInsertionPointPopover

    gutenberg/packages/block-editor/src/components/block-tools/insertion-point.js

    Line 11 in e8878c1

    import { __unstableMotion as motion } from '@wordpress/components';

  • InspectorControlSlot

    gutenberg/packages/block-editor/src/components/inspector-controls/slot.js

    Line 6 in e8878c1

    __unstableMotionContext as MotionContext,

  • LinkSettingsDrawer

    gutenberg/packages/block-editor/src/components/link-control/settings-drawer.js

    Lines 6 to 7 in e8878c1

    	__unstableMotion as motion,
    	__unstableAnimatePresence as AnimatePresence,

• edit-post
  • Header

    gutenberg/packages/edit-post/src/components/header/index.js

    Line 18 in e8878c1

    import { __unstableMotion as motion } from '@wordpress/components';

    gutenberg/packages/edit-post/src/components/header/fullscreen-mode-close/index.js

    Line 13 in e8878c1

    __unstableMotion as motion,

• edit-site
  • Editor

    gutenberg/packages/edit-site/src/components/editor/index.js

    Lines 12 to 13 in e8878c1

    	__unstableAnimatePresence as AnimatePresence,
    	__unstableMotion as motion,

  • HighlightedColors

    gutenberg/packages/edit-site/src/components/global-styles/highlighted-colors.js

    Line 4 in e8878c1

    import { __unstableMotion as motion } from '@wordpress/components';

  • StylesPreviewColors

    gutenberg/packages/edit-site/src/components/global-styles/preview-colors.js

    Line 6 in e8878c1

    __unstableMotion as motion,

  • PreviewIframe

    gutenberg/packages/edit-site/src/components/global-styles/preview-iframe.js

    Line 9 in e8878c1

    import { __unstableMotion as motion } from '@wordpress/components';

  • PreviewStyles

    gutenberg/packages/edit-site/src/components/global-styles/preview-styles.js

    Line 8 in e8878c1

    __unstableMotion as motion,

  • PreviewTypography

    gutenberg/packages/edit-site/src/components/global-styles/typography-example.js

    Line 5 in e8878c1

    import { __unstableMotion as motion } from '@wordpress/components';

  • HeaderEditMode

    gutenberg/packages/edit-site/src/components/header-edit-mode/index.js

    Line 13 in e8878c1

    import { __unstableMotion as motion } from '@wordpress/components';

  • Layout

    gutenberg/packages/edit-site/src/components/layout/index.js

    Lines 11 to 12 in e8878c1

    	__unstableMotion as motion,
    	__unstableAnimatePresence as AnimatePresence,

  • ResizableFrame

    gutenberg/packages/edit-site/src/components/resizable-frame/index.js

    Line 13 in e8878c1

    __unstableMotion as motion,

  • SiteHub

    gutenberg/packages/edit-site/src/components/site-hub/index.js

    Lines 12 to 13 in e8878c1

    	__unstableMotion as motion,
    	__unstableAnimatePresence as AnimatePresence,

• editor
  • DocumentBar

    gutenberg/packages/editor/src/components/document-bar/index.js

    Lines 14 to 15 in e8878c1

    	__unstableMotion as motion,
    	__unstableAnimatePresence as AnimatePresence,

  • maybe-upload-media

    gutenberg/packages/editor/src/components/post-publish-panel/maybe-upload-media.js

    Lines 8 to 9 in e8878c1

    	__unstableMotion as motion,
    	__unstableAnimatePresence as AnimatePresence,

• interface
  • ComplementaryArea

    gutenberg/packages/interface/src/components/complementary-area/index.js

    Lines 14 to 15 in e8878c1

    	__unstableMotion as motion,
    	__unstableAnimatePresence as AnimatePresence,

  • InterfaceSkeleton

    gutenberg/packages/interface/src/components/interface-skeleton/index.js

    Lines 12 to 13 in e8878c1

    	__unstableMotion as motion,
    	__unstableAnimatePresence as AnimatePresence,

[youknowriad]

If we are able to achieve the same results, I think that's fine but I think we should probably leave the deprecation as the last step after removing all usage in Gutenberg. We don't want core's codebase to trigger deprecation messages.

[DaniGuardiola]

@youknowriad agreed, updated the strategy in the issue description.

[DaniGuardiola]

Another reason: it seems like it won't support React 19 for a good while, as the maintainers have run into a lot of trouble

@diegohaz discussed this on the bird platform: https://x.com/diegohaz/status/1793164208571638155

[anomiex]

I note that framer-motion v11.5.0 has deprecated their motion() function in favor of motion.create(). Given the plans in this issue to remove framer-motion entirely I don't know whether you'll want to fix that or ignore it / stick with 11.4.0 until this is completed.