npm / motion
motion
What changed in motion 12 to 14, from its official release notes, upgrade guides and advisories. Also covers framer-motion. Sources checked 2026-10-19.
10 breaking36 new APIs and options20 performance8 behavior and defaults95 fixes and other
See which of these apply to your code, ranked, in your agent:
npx @unstale/cli initmotion 1427 changes
Breaking changes 1
Internal APIs restored in 13.5.1 for compatibility with framer-motion 13.0–13.4 were removed.
New APIs and options 4
Adds support for scaleZ.
Adds the
edgesandrandomvalues for the from option.Adds the grid option to stagger.
Adds layout animations for vanilla JS.
Performance 1
Independent transforms like x, y, and scaleX are now hardware accelerated.
Fixes and other changes 21
Fires onExitComplete after exiting children unmount.
popLayout children that do not accept ref are now popped when the root component is a motion element.
Fixes path animations with animate.
Fixes drag jumping to 0 after animate x or y to a CSS variable.
Fixes accelerated independent transform animations vanishing when they start from a float residue.
Fixes layout animations when layout is enabled after mount.
Fixes matrix3d and other digit-named transform functions being tokenised as numbers.
Fixes SVG MotionValue children being written as a children attribute.
Fixes interpolation of axis rotate and skew transforms during shared layout animation.
Ensures shared elements are freed from memory when unmounted.
When switching targets, useSpring now animates to the new target on switch.
Makes cubicBezier more accurate and 2x faster.
Fixes velocity hand-off for hardware-accelerated springs.
Fixes click events on reordered items.
Fixes desynchronization when the source is set in an effect under Strict Mode.
Fixes JS animations jumping ahead when played after a pause at non-1 speed.
Fixes popLayout when rendering into another window or iframe.
Animation start is delayed when the main thread is held, preventing visual jumps.
Layout animations are now allowed inside dragged elements.
Fixes reporting of elastic overscroll.
Fixes these interactions getting stuck after Fast Refresh reorders siblings.
motion 1356 changes
Breaking changes 4
ScrollTimeline support for JS callbacks was removed because benchmarks showed no improvement over scrollInfo.
The useDefaultValueType argument is no longer accepted by set().
The optional dependency was removed in favour of explicitly providing isPropValid through MotionConfig.
Use isValidProp to provide prop validation explicitly, replacing the optional @emotion/is-prop-valid dependency.
New APIs and options 10
spring accepts negative bounce values from 0 to -1 to define overdamped springs.
Adds view transitions for React 19.3, built on React's ViewTransition.
Hooks for Motion Editor were added.
Register effects that let animate drive non-DOM subjects alongside DOM elements.
Adds the read option.
Adds the step option.
Adds the test option.
Exposes bound motion values through effect.get().
Adds support for animating Three.js objects, materials, shader uniforms, TSL uniform nodes and more.
Adds support for shared uniforms, bindings, scene nodes, cameras, lights, materials, orbit controls, CSS colors and vector components.
Performance 13
<m> is 20% smaller.
useSpring is 10% smaller.
The spring is 5% smaller.
The scroll implementation is 44% smaller.
Scroll callbacks run 50% faster.
The useScroll implementation is 33% smaller.
The size of
animatewas reduced by 10%.Startup time was reduced by 20%.
Per-frame JavaScript was reduced by 10%.
Frame scheduling is 10% faster.
Retargeting time was reduced by 80%.
Retargeting time was reduced by 80%.
Reduces filesize and improves performance.
Behavior and default changes 5
offset animations use the main thread.
offset animations use the main thread.
Reorder supports multidimensional reordering.
Reorder automatically detects the axis.
Reorder supports right-to-left layouts.
Fixes and other changes 24
When computed style is empty, SVG value reading falls back to the attribute.
Setting
inherit={false}now correctly prevents inheriting parent animations.The removal of the internal API was temporarily reverted to restore compatibility with previous 13.x APIs.
Cleaning up an earlier value no longer removes a value bound to the same key afterward.
Transforms and origins are no longer written as attributes.
warning and error messages are cleaned from production builds.
Values are never rendered before they have been resolved.
In mode="wait", new children are no longer dropped if exit completes during a React transition.
Fixes relative child jumping when a parent interrupts a layout animation.
Only clears the reorder guard when values change.
The spring is 5% smaller.
Children no longer stick during reentry.
Improved pointerend timing.
Invalid spring values are checked before being applied.
Fixed origin drift when snapToCursor is used on repeated calls.
Animations replay when Suspense reveals memoized content.
Unrecognised easing names no longer throw.
Changing dragConstraints no longer scales the position of elements at origin 0.
CSS variable writes on SVGs now apply to the style attribute.
Path drawing calculations were fixed.
Compatibility with React 19 strict mode is improved.
Animation window access is guarded in non-browser runtimes.
Nodes are marked as safe to remove when rendering with propagate and no motion children.
Final styles are now correctly applied when an animation completes.
motion 1286 changes
Breaking changes 5
Passing a custom motion component an incorrect ref type now throws an error.
Automatic border-radius animation is disabled.
Group layers automatically crop with children set to cover and animate border-radius from its old to new value; .crop(false) disables this.
.enter() now refers specifically to the new layer when there is no matching old layer.
.exit() now refers specifically to the old layer when there is no matching new layer.
New APIs and options 22
The new group(false) method opts out of automatic layer grouping.
.add() resolves a CSS selector or Element and automatically generates, applies, and removes view-transition-name.
.class(name) tags currently selected elements with a view-transition-class for use as a custom CSS hook.
.layout() sets a custom transition on the size and position animation of currently selected elements.
.new() configures values to animate on new layers.
.old() configures values to animate on old layers.
Adds arc() for motion along an arc.
Adds the path option to transition.
Animation sequences now support repeatDelay.
Animation sequences now support repeatType.
Added a prop to configure the custom anchor point used to resolve relative projection boxes.
The color color type is supported.
The color-mix color type is supported.
The lab color type is supported.
The lch color type is supported.
The light-dark color type is supported.
The oklab color type is supported.
The oklch color type is supported.
Can now accept "x" or "y" to snap to the origin on only one axis.
Supports axis-locked layout animations with
layout="x"andlayout="y".Added as an option to
useSpringto skip the initial animation.scroll now supports ViewTimeline.
Performance 6
Supported browsers now hardware-accelerate backgroundColor.
SVG elements are now hardware-accelerated.
Reduced memory pressure from layout animations.
Hardware acceleration is supported for start and end offsets in scroll.
Hardware acceleration is supported for start and end offsets in useScroll.
Reduced the filesize of styleEffect.
Behavior and default changes 3
Layers are now automatically grouped to match their DOM hierarchy.
animateView moves from Motion+ Early Access and alpha to the main library.
useScroll now supports ViewTimeline.
Fixes and other changes 50
Exiting children no longer interleave with entering children, preventing reordering and remounting of children present in both renders.
Cropped group layers now animate border-radius from the old radius to the new radius.
Defining .new() now cancels the old layer fade out.
Auto-crop now accounts for aspect ratios and disables crops when aspect ratios match.
Improves handling of parallel and interleaved calls.
Prevents exit animations from getting stuck when children interrupt.
Interrupted transition setups now return a resolved animation instead of throwing.
Child e.stopPropagation() no longer breaks drag end.
Fixes an out-of-memory issue on Windows when importing via the motion package.
Object-form initial values are now applied on re-entry after exit completes.
The gesture no longer starts from an incorrect start point when rendered inside <AnimatePresence initial={false} />.
Viewport-relative refs no longer break on scroll.
In-flight motion value animations are preserved across React 19 reorder unmount/remount, preventing the drag transform from being stranded after a layout swap.
Keyframe animations rerun when switching between variant labels, even when their keyframe arrays are identical.
The framer-motion and framer-motion/m CJS bundles share React contexts, so features loaded by LazyMotion from the main entry point are picked up by <m.div> from the /m subpath.
Callback progress is fixed when tracking an element.
useAnimate now respects skipAnimations.
Refs for target and container can now be hydrated from anywhere in the tree.
Refs for target and container can now be hydrated from anywhere in the tree.
Hardware acceleration is fixed when tracking an element.
Ensures children are removed when an exit animation matches current values.
Fixed axis switching after window resize.
Fixed behavior with virtualised lists.
Fixed draggable elements when layout updates because surrounding elements re-render.
The motion value returned from useSpring now reports the correct isAnimating() state.
Fixed whileInView behavior with client-side navigation.
Elements using
mode="wait"no longer get stuck when switched rapidly.The easing now returns
1whenp === 1.Component values are reset when the exit animation finishes.
The attribute is removed from exiting elements when an animation is interrupted.
Fixed a resolve error in Storybook.
Fixed
heightandwidth: autoanimations whenbox-sizingisborder-box.MotionValue props are no longer passed to SVG.
WAAPI is skipped for non-animatable keyframes.
WAAPI is skipped for SVG transforms.
Updated animation sequence segment types to exclude lifecycle handlers.
Fixed autoplay: false with WAAPI animations.
Detects divide-by-zero in CSS calc() values before making them animatable templates.
Fixed layout animations with parents offset by a %-based translation.
Fixed layout jumps in React Strict Mode during development.
Fixed opacity animations in React Strict Mode during development.
Fixed rounding from popLayout.
Ensured useSpring is not affected by monitor framerate.
Setting animation.time to 0 on a finished animation now sets the playhead in a paused state.
Fixes the combination of string keyframes, spring and delay.
Negative scroll values are now handled gracefully.
Fixes a one-frame visual gap when rapidly switching WAAPI animations.
Prevents Next.js from caching typeof window checks.
Fixes variant propagation for children that mount asynchronously.
Final WAAPI styles are always committed synchronously to prevent flashes of incorrect styles in Firefox.