motiondivision/motion

This system is a high-performance animation library, rebranded as Motion, that provides declarative animation capabilities for React and imperative tools for vanilla JavaScript. It features a modular architecture that separates core DOM rendering and projection logic into a standalone \motion-dom\ package, enabling lightweight usage and React Server Component compatibility. The library supports a wide range of interaction patterns, including layout transitions, gesture handling, and scroll-linked animations, while offering optimized paths via Web Animations API and WebGPU integration.

65 changes.

The project rebranded from Framer Motion to Motion, restructuring the codebase into a monorepo and migrating core components to support React Server Components. This period introduced significant new features such as the AnimateView component, multidimensional Reorder support, and a modular feature registration system, while deprecating legacy APIs like AnimateSharedLayout. Extensive refactoring of the rendering, gesture, and animation engines was accompanied by comprehensive test coverage to ensure stability across the new architecture.

90 changes.

The project extracted core animation and rendering logic into a standalone motion-dom package, enabling lightweight, framework-agnostic usage and support for React 19. This period introduced new APIs for scroll-linked animations, viewport detection, and custom effects, while restructuring the build system to support multiple entry points and modern development tooling.

30 changes.

This period focused on consolidating core animation, projection, and rendering logic into the motion-dom package to decouple it from framework-specific layers. It introduced a new imperative animateLayout API for vanilla JavaScript and expanded view transition capabilities with advanced morphing features. The work was heavily supported by comprehensive unit and integration tests to ensure stability across these architectural shifts.

A new demo page at /arcs has been added to showcase the \arc()\ motion path feature. It includes two examples: one using the \motion\ component with keyframe animations and another using \useAnimate\ for imperative animations, both demonstrating how to apply arc-shaped motion paths to element movement.

dev/next/app/arcs · high confidence

The motion-dom package now includes a new add-dom-event utility function that simplifies adding and removing event listeners on DOM targets. This utility handles the standard addEventListener call with configurable options (defaulting to passive: true) and returns a cleanup function for removing the listener, providing a consistent way to manage event bindings within the motion-dom layer.

packages/motion-dom/src/events · high confidence

A new propEffect has been introduced to allow the animate() function to write motion values to the properties of any object, serving as a fallback for subjects that are not registered with a specific effect. This enables animation capabilities on generic JavaScript objects by reading and writing string or number properties directly.

packages/motion-dom/src/effects/prop · high confidence

This change introduces a new demonstration application within the Next.js App Router structure to showcase how Motion React components integrate with React Server Components. It includes a root layout with a WeakRef polyfill for browser compatibility, a client-boundary module that wraps Motion components using \motion.create\ to ensure they execute on the client, and a main page that renders various animated elements like \motion.div\, custom components, and render-prop patterns. The setup also utilizes \LazyMotion\ and \MotionConfig\ to manage feature loading and global animation settings, providing a concrete example of client-side animation behavior in a server-component-heavy environment.

dev/next/app · high confidence

A new Next.js project structure has been added to the \dev/next\ directory, including configuration files (\tsconfig.json\, \.eslintrc.cjs\, \next-env.d.ts\) to support TypeScript and React development. This location specifically provides a \layout-id\ demo page that showcases the \LayoutGroup\ and \motion\ components from \motion/react\ within a Next.js App Router context, demonstrating layout animations in a client-side component.

dev/next · high confidence

The scroll rendering utilities now support the native ViewTimeline API, allowing scroll-linked animations to leverage browser-native performance when available. This change introduces logic to detect ViewTimeline support and map Motion's preset scroll offsets (Enter, Exit, Any, All) to the corresponding ViewTimeline named ranges (entry, exit, cover, contain). If ViewTimeline is unsupported or the offset configuration is complex, the system automatically falls back to the existing JavaScript-based scroll tracking, ensuring consistent behavior across all browsers.

packages/framer-motion/src/render/dom/scroll/utils · high confidence

Added a suite of HTML demo pages in the animate-layout directory to showcase and test the new vanilla JS layout animation API. These pages cover specific use cases including basic position changes, fire-and-forget animations, interrupting ongoing animations, and complex modal open/close sequences with smooth transitions.

dev/html/public/animate-layout · high confidence

The \packages/motion-dom/src/stats\ module now includes a new \recordStats\ function and supporting buffer logic to capture layout projection performance data. This addition introduces a mechanism to initialize a stats buffer, append per-frame metrics (such as node counts and calculated deltas), and prevents concurrent measurement sessions. While this is an internal implementation detail, it enables the collection of layout projection statistics for debugging or performance analysis.

packages/motion-dom/src/stats · high confidence

The Reorder component now supports multi-dimensional (xy) dragging, allowing items to be rearranged across both axes rather than just a single line. This includes logic to detect the appropriate axis based on item layouts and handle item movement between rows or columns. Additionally, an auto-scroll utility has been introduced to automatically scroll the container or page when dragging items near the edges, improving usability for large lists that extend beyond the viewport.

packages/framer-motion/src/components/Reorder/utils · high confidence

Added a suite of HTML-based performance benchmarks in the public directory to measure the speed of various animation operations. These tests cover cold-start scenarios for libraries like Anime.js, GSAP, and Framer Motion, as well as specific stress tests for interrupting animations, mixing unit values (numbers, colors, complex strings), and measuring the overhead of transform rebuilds during atomic updates.

dev/html/public/benchmarks · high confidence

This change introduces a new \resize\ module in \packages/motion-dom/src/resize\ that provides a unified API for detecting resize events. It exports a \resize\ function that accepts either a window resize handler or an element selector with a corresponding handler, internally delegating to \handle-window.ts\ (using native \window.addEventListener('resize')\) or \handle-element.ts\ (using \ResizeObserver\). The module includes TypeScript definitions in \types.ts\ and a mock implementation for testing in \\_\tests\\_/mock-resize-observer.ts\, enabling consumers to react to dimension changes on specific DOM elements or the entire viewport.

packages/motion-dom/src/resize · high confidence

Introduced a new \tag-proxy\ utility in the components utils module that enables the creation of generic components capable of rendering as different HTML tags or custom components. This utility handles prop binding and caching to ensure efficient reuse of generated component instances, supporting both standard HTML elements and custom React components with distinct prop interfaces.

packages/framer-motion/src/components/utils · high confidence

AnimatePresence introduces a new 'popLayout' mode (accessible via the \mode\ prop) that allows exiting elements to be visually 'popped' out of the document flow, enabling sibling elements to immediately shift into their new positions without waiting for the exit animation to finish. This is implemented by injecting a dedicated style block (supporting CSP nonces) that absolutely positions the exiting child at its measured coordinates, while preserving external refs and handling RTL layouts correctly. The component also adds \anchorX\ and \anchorY\ props to control the positioning anchor for these pop-out animations, and includes a new \usePresenceData\ hook to access custom exit data.

packages/framer-motion/src/components/AnimatePresence · high confidence

New scripts in the repository now automate the release communication workflow. The generate-changelog.js script converts the repository's CHANGELOG.md into a structured CSV file (changelog.csv). The push-to-site.js script mirrors this CSV to the motion-api site source, ensuring the public changelog at motion.dev/changelog stays synchronized with the library's version history. Additionally, notify-slack.js automatically posts release updates to Slack, including the version number and relevant changelog sections, for non-pre-release versions.

scripts · high confidence

The repository has been initialized with core development infrastructure, including ESLint and Prettier configuration files (.eslintrc, .prettierrc.json), a Yarn 3.6.4 workspace setup (.yarnrc.yml), and a Node.js 22 environment specification (.nvmrc). It also introduces project documentation (AGENTS.md, CLAUDE.md, CONTRIBUTING.md) and a funding configuration (FUNDING.json) to support the open-source project.

(repo-wide) · high confidence

This change introduces a new Web Animations API (WAAPI) animator implementation for framer-motion, located in the \waapi\ directory. It adds \animate-elements.ts\ to handle element resolution, keyframe interpolation, and animation lifecycle management using native browser APIs, \animate-sequence.ts\ to orchestrate sequential animations, and \animate-style.ts\ which exposes the \animateMini\ function. This provides a smaller, faster alternative to the default animator, specifically optimized for performance-critical or lightweight contexts where the full animation engine is not required.

packages/framer-motion/src/animation/animators/waapi · high confidence

Adds a new \animateView\ builder in \packages/motion-dom/src/view\ that exposes the browser's native CSS View Transitions API with motion-specific enhancements. Users can now define shared-element morphs between different elements, apply automatic cropping with animated corner radii, and control layer nesting or escaping via \.group()\. The API supports pairing elements for cross-element transitions, applying CSS classes to generated transition layers for custom styling, and managing animation interruption behavior, effectively bridging the gap between React state changes and native browser view-transition animations.

packages/motion-dom/src/view · high confidence

This change adds a suite of internal utility functions in the motion-dom package to support the browser's View Transitions API. The new code handles the generation and management of unique transition names, allowing the library to target specific DOM elements for morphing without conflicting with author-defined names. It also implements logic to batch style reads to prevent performance-degrading style recalculations, manages CSS class and group properties for layer reconstruction, and provides helpers to identify and retrieve active view transition animations. These utilities form the backend support for smoother, more reliable view transitions in the library.

packages/motion-dom/src/view/utils · high confidence

The library now exposes a new \m\ namespace alongside the existing \motion\ namespace. The \m\ namespace provides minimal-motion components (e.g., \m.div\, \m.create\) that wrap standard HTML/SVG elements without the full animation feature bundle, offering a lighter alternative for users who do not need advanced motion capabilities. The existing \motion\ namespace remains unchanged, continuing to provide full-featured components with animations, gestures, drag, and layout support.

packages/framer-motion/src/render/components/motion · high confidence

The new \packages/motion-utils/src\ directory introduces a collection of foundational utility functions and modules for the motion library. This includes array manipulation helpers (\addUniqueItem\, \removeItem\, \moveItem\), value constraints (\clamp\, \wrap\), and type checking utilities (\isNumericalString\, \isObject\, \isZeroValueString\). It also provides error handling mechanisms with development warnings and invariants (\errors.ts\, \warn-once.ts\), a subscription manager for event handling, and various mathematical and time conversion helpers (\progress\, \velocityPerSecond\, \time-conversion\). Additionally, it exports a suite of easing functions and global configuration options (\global-config.ts\), establishing a shared utility layer for the rest of the motion ecosystem.

packages/motion-utils/src · high confidence

Users can now import a dedicated AnimateView component from the new motion/react-animate-view entry point, which requires React 19.3 and is distributed as a separate JavaScript and declaration bundle. Additionally, the library introduces threeEffect and vgpuEffect adapters that allow motion values to be bound directly to Three.js objects (meshes, materials, uniforms, including TSL uniform nodes) and vgpu shader units, with values batched and applied once per frame before the render step.

packages/motion/src · high confidence

Introduces the AnimateView component, which enables animating React View Transitions (enter, exit, share, and update) by controlling the underlying browser pseudo-element layers. This feature allows developers to customize transition timing, replace default crossfades with custom keyframes, and manage layer animations directly within the framer-motion API.

packages/framer-motion/src · high confidence

Added a suite of interactive demo pages in the development HTML source to showcase GPU adapter capabilities. These examples demonstrate animating Three.js object and material properties, updating shader uniforms, and leveraging Three.js TSL (Three.js Shading Language) uniform nodes with the WebGPURenderer. Additionally, new demos illustrate custom WebGPU rendering using the vgpu library, including scene management, light animation, and interactive gradient effects.

dev/html/src · high confidence

The \packages/motion-dom/src/render/html/utils\ directory now contains the core logic for rendering HTML elements, including \build-styles.ts\ for converting animated values to CSS styles and variables, \build-transform.ts\ for composing CSS transform strings (including support for \pathRotation\ and custom \transformTemplate\ functions), \render.ts\ for applying styles and CSS variables to DOM elements, and \scrape-motion-values.ts\ for extracting motion values from component props.

packages/motion-dom/src/render/html/utils · high confidence

A new MeasureLayout component has been introduced in the layout feature module to manage layout animations and projection state. This component integrates with React's lifecycle methods to handle layout dependencies, group projections, and coordinate exit animations, ensuring that layout changes are properly tracked and synchronized across components.

packages/framer-motion/src/motion/features/layout · high confidence

A new \MotionConfig\ component has been introduced to allow developers to set configuration options (such as transitions, reduced motion preferences, and animation skipping) for all child \motion\ components. It automatically inherits and merges settings from parent \MotionConfig\ instances via the \resolveTransition\ utility and provides a context provider to distribute these settings throughout the component tree.

packages/framer-motion/src/components/MotionConfig · high confidence

A new NodeStack class has been introduced in the motion-dom projection system to manage the lifecycle and hierarchy of shared layout nodes. This component tracks lead and previous lead nodes, handles the addition and removal of members, and manages the promotion and relegation of nodes within the stack. It ensures that layout dependencies and snapshots are correctly transferred when nodes change roles, supporting smoother transitions and state management for shared layout animations.

packages/motion-dom/src/projection/shared · high confidence

A new local development environment has been added at dev/react-19 to support testing and example execution against React 19. This setup uses Vite with the SWC React plugin, configures TypeScript for modern module resolution, and enforces ESLint rules including React Refresh. The application provides a playground interface that dynamically loads examples and test components from the main react package, wrapping them in React StrictMode to help catch potential issues during development.

dev/react-19 · high confidence

The development environment now includes a new \App.tsx\ entry point that dynamically loads examples and tests from the \dev/react/src/examples\ and \dev/react/src/tests\ directories, wrapping them in React's StrictMode. This change introduces a large set of new interactive examples demonstrating \AnimatePresence\ features (such as layout animations, sibling handling, and the new \propagate\ option), various animation types (CSS variables, keyframes, layout transitions, and spring physics), and specific use cases like image galleries and notification lists.

dev/react/src/examples · high confidence

A new React development environment has been added to the \dev/react\ directory, replacing previous setups with a Vite-based toolchain. This includes configuration files for TypeScript (\tsconfig.json\, \tsconfig.node.json\), ESLint (\.eslintrc.cjs\), and Vite (\vite.config.ts\), along with the entry point (\index.html\, \main.tsx\). Users can now run this environment via \yarn dev\ to access examples and tests at \http://localhost:9990\, leveraging Vite's fast HMR (though disabled here for stability) and SWC compilation for improved performance during development.

dev/react · high confidence

The dev/html directory has been replaced with a new Vite-based development environment. This update introduces a playground interface featuring dedicated demo pages for Three.js integration, including animate() usage, effects bindings, and TSL (Three.js Shading Language) with the WebGPURenderer. It also adds specific demos for vgpu uniforms and scene animations, providing a centralized location for testing GPU adapter previews and layout projection benchmarks.

dev/html · high confidence

Added a suite of interactive HTML examples in the public examples directory that showcase the new animateView() API. These demos illustrate key capabilities including shared-element morphs (avatar-to-profile, Netflix-style card-to-modal, lightbox), layout morphs with auto-layout and staggered transitions (grid shuffling, filter galleries), and advanced clipping behaviors (crop cover/contain, circular clip-path reveals, and escaping clipping ancestors with .group(false)).

dev/html/public/examples · high confidence

This change introduces new hooks in the animation hooks module: \useAnimate\ and \useAnimateMini\ for scoped animations, \useAnimatedState\ for animating state values, and \useAnimationControls\ (aliased as \useAnimation\) for legacy animation controls. \useAnimate\ now respects \MotionConfig\ settings like \skipAnimations\ and \reduceMotion\. The \useAnimateMini\ hook provides a lighter-weight alternative using WAAPI. The \useAnimatedState\ hook allows animating arbitrary state objects. These hooks are marked as 'use client' for React Server Components compatibility.

packages/framer-motion/src/animation/hooks · high confidence

The \packages/motion-utils/src/easing\ module now includes a full suite of easing functions (including \anticipate\, \back\, \circ\, \cubic-bezier\, \steps\, and standard \ease\ variants) along with utility modifiers like \mirrorEasing\ and \reverseEasing\. This change introduces a robust mapping system (\easingDefinitionToFunction\) that allows users to specify easings by name (e.g., 'easeInOut') or via cubic-bezier arrays. Additionally, the update adds extensive test coverage for all new easing implementations and utility functions to ensure correctness.

packages/motion-utils/src/easing · high confidence

The animation engine now exposes a public API for registering custom effects via \animate.addEffect()\, allowing developers to extend motion capabilities beyond standard DOM properties. This change introduces core utilities (\createEffect\ and \createSelectorEffect\) that standardize how effects interact with \MotionValue\ instances, handle element resolution, and manage state subscriptions. Users can now define custom renderers for non-standard subjects or specific property types by implementing the required \test\, \read\, \get\, and \flush\ methods, integrating them seamlessly into the existing animation loop.

packages/motion-dom/src/effects/utils · high confidence

The MotionDOM library now exposes dedicated gesture handlers—\hover()\, \press()\, and \resize()\—allowing developers to attach lifecycle callbacks to pointer and dimension changes. The \hover()\ API supports multiple concurrent listeners and a \once\ option for one-time execution. The \press()\ API provides granular control over pointer events, including support for cancelation states, propagation stopping, and preservation of existing \tabindex\ attributes on elements. The \resize()\ API monitors size changes for both HTML elements and SVG shapes, enabling reactive updates based on width and height dimensions.

dev/html/public/playwright/gestures · high confidence

The \dev/html/src/imports\ directory now exposes several new global objects to support vanilla JavaScript animation and layout projection. \window.AnimateLayout\ provides the \unstable\_animateLayout\ API and related builders from \framer-motion/dom\. \window.Animate\ and \window.Undo\ expose custom \createNode\ functions that initialize \HTMLProjectionNode\ instances for layout-aware animations, with \Undo\ specifically disabling automatic animation. \window.Assert\ adds debugging utilities to verify viewport boxes, visibility, opacity, and transform states. Additionally, \window.Motion\, \window.MotionDOM\, \window.Projection\, \window.gsap\, and \window.anime\ expose their respective libraries globally, while \window.React\ and related modules are re-exported from \motion/react\ in the optimized-appear import.

dev/html/src/imports · high confidence

The library now supports layout animations in vanilla JavaScript environments through a new \animateLayout\ API and a dedicated \LayoutAnimationBuilder\. This feature allows developers to animate layout changes imperatively by adding \data-layout\ or \data-layout-id\ attributes to DOM elements. The implementation uses a shared projection tree and batched commits to ensure that layout measurements and DOM updates are synchronized, preventing visual glitches and ensuring that layout animations compose correctly with existing \animate()\ calls.

packages/motion-dom/src/layout · high confidence

A new \inView\ function has been added to the DOM viewport rendering module, allowing users to detect when elements enter or leave the viewport using the native IntersectionObserver API. This utility accepts an element or selector, along with options for root context, margin, and intersection amount (such as 'some' or 'all'), and provides callbacks for when elements start and stop intersecting. It returns a cleanup function to disconnect the observer, enabling precise control over viewport-based animations or logic without manual observer management.

packages/framer-motion/src/render/dom/viewport · high confidence

The \packages/motion-dom/src/value\ module now exposes a set of new primitives for managing motion state: \followValue\ and \attachFollow\ allow a value to animate to a source (with an optional \skipInitialAnimation\ option to prevent animations on page refresh), \springValue\ and \attachSpring\ provide spring-based tracking, \mapValue\ maps one value range to another, and \transformValue\ creates a value derived from a function of other values. These utilities are built on a refactored \MotionValue\ class that supports passive effects and event notifications, enabling more flexible and performant value composition in the library.

packages/motion-dom/src/value · high confidence

The motion-dom package now exposes a comprehensive set of core capabilities, including animation interfaces (animateMotionValue, animateVisualElement), gesture handling (drag, hover, press), visual element rendering (DOMVisualElement, HTMLVisualElement, SVGVisualElement, and a new ObjectVisualElement for non-DOM targets), and value management (MotionValue, springValue, transformValue). This change centralizes the underlying animation engine, effect system, and rendering abstractions, enabling more flexible integration and potential use in non-browser environments via the ObjectVisualElement implementation.

packages/motion-dom/src · high confidence

The drag gesture system now exposes a \useDragControls\ hook that returns a \DragControls\ instance, allowing developers to programmatically initiate, cancel, or stop drag gestures from external components (e.g., starting a drag via a button click rather than direct pointer interaction with the draggable element). The \DragControls\ API provides \start(event, options?)\, \cancel()\, and \stop()\ methods that propagate to all subscribed \motion\ components. Additionally, the \DragControlOptions\ interface now supports a \distanceThreshold\ configuration to define the movement distance required before a drag direction is locked in.

packages/framer-motion/src/gestures/drag · high confidence

The scroll rendering module has been refactored to support two new capabilities: scroll-linked animations and enhanced scroll callbacks. Users can now pass an animation control to the scroll function to drive it via native ViewTimeline or ScrollTimeline, with automatic fallback to JavaScript observation. Additionally, the onScroll callback now supports a two-argument form that provides detailed scroll information (progress, velocity, offsets) for both axes, enabling more precise scroll-driven interactions.

packages/framer-motion/src/render/dom/scroll · high confidence

The MotionConfig component now accepts a skipAnimations prop. When enabled, all animations are bypassed and values are applied instantly, which is particularly useful for E2E and visual regression testing scenarios.

packages/motion-dom/src/render · high confidence

Added a new \isDraggable\ utility function that determines if a visual element is draggable by checking its props, and introduced a new \AnimationType\ type definition that enumerates supported animation states such as animate, whileHover, whileTap, whileDrag, whileFocus, whileInView, and exit. These additions provide foundational utilities and type safety for drag-related logic and animation state management within the rendering layer.

packages/framer-motion/src/render/utils · high confidence

This update introduces several new utilities to the framer-motion package. For developers using drag interactions, two new functions, correctParentTransform and transformViewBoxPoint, are now available to correctly handle pointer coordinates when dragging inside rotated/scaled parent containers or SVGs with a viewBox. The library also adds new React hooks: useAnimationFrame for executing callbacks on the animation frame with delta timing, useCycle for cycling through a set of values, useForceUpdate for triggering re-renders, useComposedRefs for combining multiple refs, and useInstantTransition for managing instant layout transitions. Additionally, useInView now supports an initial option to set the initial visibility state, and useMotionValueEvent allows subscribing to motion value events using useInsertionEffect for earlier binding.

packages/framer-motion/src/utils · high confidence

Added a new \mix\ utility and supporting modules (\color\, \complex\, \number\, \visibility\) in \packages/motion-dom/src/utils/mix\ to handle interpolation of animation values. This includes linear color blending, complex CSS value mixing (e.g., shadows, transforms), and binary visibility transitions, along with comprehensive test coverage for these behaviors.

packages/motion-dom/src/utils/mix · high confidence

A new \attr\ effect has been added to the motion-dom package, enabling the animation of specific HTML and SVG attributes (such as \cx\, \cy\, or \viewBox\) through the \animate()\ function. This implementation distinguishes between standard DOM properties and attributes, automatically applying camel-to-dash conversion for data and ARIA attributes, and ensures numeric values are rendered with their default units. This allows users to drive visual element values directly through attribute changes during animations.

packages/motion-dom/src/effects/attr · high confidence

Framer Motion now allows animating plain JavaScript objects, not just DOM elements. This is enabled by new utility functions that create visual element wrappers for both DOM nodes and generic objects, allowing developers to animate properties on non-DOM targets.

packages/framer-motion/src/animation/utils · high confidence

Animation sequences now support repeating animations via the \repeat\ and \repeatDelay\ options, allowing users to loop keyframes with configurable delays. Additionally, timeline keyframe times can now be defined relative to previous keyframes using syntax like \\<\ (start at previous end) or \\<+offset\, providing more flexible and concise sequence construction.

packages/framer-motion/src/animation/sequence/utils · high confidence

The \src/index.ts\, \src/loader.ts\, and \src/test.tsx\ files have been deleted from the source tree. This removes the Webpack entry-point loader that validated React and ReactDOM availability, the basic test component, and the main export file that previously re-exported the test component. These changes clean up internal development scaffolding and unused entry points.

src · high confidence

The Webpack-based local development setup has been removed, deleting the configuration, entry points, HTML template, and bundled React runtime files that previously powered the local dev server. This change eliminates the ability to run the legacy Webpack development environment, aligning with the project's shift to Vite for local development.

dev/webpack · high confidence

The legacy example setup in the dev/examples directory has been removed, specifically deleting the test.tsx component file and the associated tslint.json configuration. This cleanup eliminates outdated example code and linting rules that are no longer part of the project structure.

dev/examples · high confidence

The motion-dom and motion-utils packages now include their core build and distribution configuration files. This adds Rollup configurations to bundle the libraries into UMD, CommonJS, and ES modules with sourcemap support, alongside TypeScript and Jest configurations to standardize compilation and testing. Additionally, .npmignore and LICENSE.md files are added to ensure only the built distribution files are published to npm.

packages/motion-dom · high confidence

The motion component's internal architecture has been restructured to support a modular, lazy-loadable feature system. New files in this directory define how specific capabilities—such as animations, gestures (hover, tap, focus, in-view), drag, and layout—are registered and enabled based on the props passed to a component. This change introduces a \FeaturePackages\ type and a \loadFeatures\ mechanism that allows these capabilities to be hydrated and attached to the motion element dynamically, replacing the previous monolithic feature inclusion approach.

packages/framer-motion/src/motion/features · high confidence

The projection node implementation has been relocated from the framework-specific layer into the core motion-dom package. This change introduces platform-agnostic node factories (DocumentProjectionNode and HTMLProjectionNode) that handle scroll measurement, resize listening, and transform resetting, providing a unified foundation for layout animations and shared element transitions across different UI frameworks.

packages/motion-dom/src/projection/node · high confidence

The internal logic for motion components has been reorganized into specific utility files within \src/motion/utils\. This includes new modules for handling visual state (\use-visual-state\), visual element lifecycle (\use-visual-element\), and ref management (\use-motion-ref\), alongside utilities for validating props (\valid-prop\), detecting motion components (\is-motion-component\), and managing variant inheritance (\should-inherit-variant\). This structural change isolates core animation mechanics and prop validation, improving code maintainability without altering the public API.

packages/framer-motion/src/motion/utils · high confidence

The motion-dom package now includes runtime checks to detect browser support for ViewTimeline (scroll-linked animations) and linear easing functions. These new utility functions allow the library to gracefully handle environments that do not natively support these modern CSS animation features, preventing crashes and enabling appropriate fallbacks for scroll-linked and linearly eased animations.

packages/motion-dom/src/utils/supports · high confidence

The motion-dom package now includes helper functions to identify and unwrap MotionValue objects. The new \isMotionValue\ utility checks for the presence of a \getVelocity\ method to determine if a value is a MotionValue, while \resolveMotionValue\ extracts the underlying primitive value from a MotionValue or returns the input unchanged if it is not. These utilities support internal logic that needs to distinguish between animated values and static keyframes.

packages/motion-dom/src/value/utils · high confidence

A new utility function, \camelToDash\, has been added to the DOM rendering utilities. This function converts camelCase identifiers (e.g., \backgroundColor\) into their dash-case equivalents (e.g., \background-color\), which is typically required for mapping JavaScript style properties to CSS custom properties or standard CSS rules.

packages/motion-dom/src/render/dom/utils · high confidence

The AnimateSharedLayout component now displays a runtime error warning when rendered, directing users to the shared layout animations upgrade guide. This change marks the component as deprecated in favor of the new LayoutGroup-based approach, ensuring users are notified of the API shift during development.

packages/framer-motion/src/components · high confidence

The animation implementation for visual elements has been moved into the \motion-dom\ package, introducing new modules for handling motion values, targets, and variants. This change adds support for the \skipAnimations\ option, allowing animations to be bypassed (applying final values instantly) when configured via global config or transition props, which is useful for E2E testing and reducing motion. The diff also includes a test ensuring the animation target logic does not throw errors in non-browser environments where \window\ is undefined.

packages/motion-dom/src/animation/interfaces · high confidence

This update introduces several improvements to the animation engine. It adds an \arc()\ utility for creating curved motion paths with configurable strength, peak, and rotation. To improve performance, the \WithPromise\ class now lazily instantiates the \finished\ promise, and a new \active-animations.ts\ module tracks animations via a WeakMap to reduce allocations. The system now supports transition inheritance via a new \inherit\ option, which merges parent transitions with child-specific ones. Additionally, an optional inspection hook (\globalThis.\_\_MOTION\INSPECT\\_\) is available for debugging, and CSS variable resolution now supports nested fallbacks with a maximum depth limit.

packages/motion-dom/src/animation/utils · high confidence

All context providers in the context directory (LayoutGroup, Lazy, MotionConfig, Presence, Reorder, and SwitchLayoutGroup) now include the 'use client' directive to ensure compatibility with React Server Components. The MotionConfig context has been expanded to support new configuration options including 'reducedMotion' for respecting device accessibility settings, 'nonce' for Content Security Policy compliance, 'skipAnimations' for testing, and 'isValidProp' for custom prop validation.

packages/framer-motion/src/context · high confidence

The \useElementScroll\ and \useViewportScroll\ hooks are now deprecated. Users should migrate to the unified \useScroll\ hook, passing a container reference for element-specific scrolling or calling it without arguments for viewport scrolling. The deprecated hooks now emit development warnings guiding users to the new API while maintaining backward compatibility.

packages/framer-motion/src/value/scroll · high confidence

A new build verification script has been added to ensure the motion-dom package does not include references to React in its distribution. This check reads the generated type definitions and fails the build if the string 'react' is found, preventing accidental inclusion of the React library in the standalone DOM bundle.

packages/motion-dom/scripts · high confidence

The build process now guarantees that generated TypeScript declaration files are fully self-contained, eliminating relative imports and preventing the inlining of duplicate \MotionValue\ class definitions that previously broke type assignability across different entry points. Additionally, the CommonJS build ensures that React contexts are shared between the main and 'm' bundles, fixing interoperability issues where components like \\<LazyMotion\>\ could not communicate with \\<m.div\>\ due to separate context instances.

packages/framer-motion/scripts · high confidence

The \dev/html/public/playwright/animate\ demo pages now provide comprehensive coverage of animation lifecycle and performance improvements. Users can test new capabilities such as setting the \iterationDuration\ property, accelerating \backgroundColor\ and \color\ animations via WAAPI, and handling complex state transitions like async cancellation, pausing after time changes, and replaying finished animations. The demos also verify fixes for reversing finished animations, correcting duration calculations, and ensuring smooth interruptions when changing colors or applying custom easings.

dev/html/public/playwright/animate · high confidence

The view animation system now supports advanced morphing features including automatic layout morphing for survivors, per-element staggered enter/exit animations, and cropped morphs that animate clip paths and border radii. A new \.class()\ escape hatch allows CSS-keyed view-transition layers, while \.add(from, to)\ enables shared-element morphs between different elements. The API has been refined by dropping legacy methods like \.get()\, \.new()\, \.old()\, and \.addName()\, and introducing \.new()\ and \.old()\ for explicit layer styling. Several correctness bugs were fixed, including issues with enter/exit application to persistent elements, duplicate view-transition names, and brightness flashes during crossfades.

dev/html/public/playwright/view · high confidence

The library has been rebranded from Framer Motion to Motion, with the README explicitly instructing users to import from 'motion/react' instead of 'framer-motion'. The package now ships with a new build system (Rollup) that bundles TypeScript definitions into self-contained .d.ts files and produces multiple entry points (main, mini, dom, client, animate-view) for CJS, ESM, and UMD formats. A new .npmignore file ensures only the dist folder and specific sub-package.json files are published, while the root package now includes a LICENSE.md and updated documentation reflecting the new 'Motion' identity and sponsor information.

packages/framer-motion · high confidence

The LayoutGroup component now accepts an 'inherit' prop that allows users to precisely control whether child components inherit the group context, the ID context, or both. Previously, inheritance was likely all-or-nothing; now, setting 'inherit' to 'id' allows ID inheritance without group inheritance, while 'true' (the default) maintains the previous behavior of inheriting both. This change is implemented in the LayoutGroup component itself, which now checks the 'inherit' value to decide whether to concatenate upstream IDs or create a new node group, providing finer control over layout animation scoping.

packages/framer-motion/src/components/LayoutGroup · high confidence

The HTML rendering layer now enforces that custom components forward their refs to actual HTML or SVG elements. If a ref is forwarded to a non-DOM node (such as a class instance or imperative handle), the library throws a clear error instead of silently failing or crashing, ensuring that motion styles and measurements are applied only to valid DOM targets.

packages/motion-dom/src/render/html · high confidence

The projection system now correctly scales \border-radius\ and \box-shadow\ values when elements are resized. Border radius pixel values are automatically converted to percentages to prevent unnecessary layout paints during animation, while box-shadow offsets, blur, and spread are mathematically adjusted to match the projection scale. This ensures that visual styles remain consistent and performant when elements are projected into different sizes.

packages/motion-dom/src/projection/styles · high confidence

A new MotionValueState class has been added to manage the lifecycle and rendering of motion values. This component allows multiple motion values (such as x and y) to share a single render entry, ensuring that renders are scheduled per state rather than through a shared global batch. This change centralizes value binding and unbinding logic, enabling more efficient, per-element render management within the effects system.

packages/motion-dom/src/effects · high confidence

This change introduces the core logic for optimized appear animations and will-change value handling within the motion-dom package. It adds a global handoff mechanism (via \Window.MotionHandoffAnimation\ and related methods) to bridge inline scripts with Motion for optimized appear animations, including utilities to retrieve the appear ID and define the necessary types. Additionally, it implements logic to manage the \willChange\ CSS property, allowing values to be added to a specialized \WillChange\ MotionValue or creating one if the global configuration permits, thereby improving rendering performance for animated elements.

packages/motion-dom/src/animation/optimized-appear, packages/motion-dom/src/value/will-change · medium confidence

The LazyMotion component has been updated to handle both synchronous and asynchronous feature bundles. Previously, it primarily supported asynchronous loading via a function that returns a Promise. The new implementation detects whether the provided \features\ prop is a synchronous \FeatureBundle\ or a lazy \LazyFeatureBundle\. If synchronous, it loads the features immediately during render, setting the renderer and state right away. If asynchronous, it continues to load the features via \useEffect\ and updates the state once loaded. This change allows developers to use \LazyMotion\ with pre-loaded feature bundles (like \domAnimation\) without the overhead of an async import, while still supporting code-splitting via dynamic imports.

packages/framer-motion/src/components/LazyMotion · high confidence

The Motion package has been reorganized to support multiple distinct entry points, including specific modules for React, React Mini, React Client, React M, Animate View, Debug, Three, and VGPU. This change introduces a new build pipeline via Rollup to generate separate CommonJS and ES modules for each entry point, alongside TypeScript declaration files. The package now explicitly includes an npm ignore file to control published contents, a MIT license file, and a Jest configuration for testing. Documentation has been updated to reflect the new import paths (e.g., \motion/react\ instead of \framer-motion\) and the availability of \AnimateView\ for React 19.3+.

packages/motion · high confidence

This change introduces a new set of files in the \motion-dom\ package to handle DOM-specific rendering logic. It adds a \DOMVisualElement\ base class that manages child motion values and keyframe resolution, alongside utility functions for parsing CSS transform matrices (\parse-transform.ts\), setting styles (\style-set.ts\), and reading computed styles (\style-computed.ts\). It also includes type definitions for DOM visual element options and a helper to identify CSS variables. These components provide the foundational rendering capabilities for DOM elements within the motion library.

packages/motion-dom/src/render/dom · high confidence

The library now supports a \motion.create()\ method, allowing users to dynamically generate motion-wrapped components at runtime (e.g., \motion.create('div')\). This new API is the recommended approach, while the legacy \motion(Component)\ pattern is retained for backward compatibility but now emits a deprecation warning via \warnOnce\ to guide users toward the new method.

packages/framer-motion/src/render/components · high confidence

The animation module now includes a new \types.ts\ file that exports the \ResolveKeyframes\ type. This type defines the signature for functions that resolve keyframes, accepting an array of resolved keyframes, a completion callback, an optional name, and an optional motion value, and returning a \KeyframeResolver\. This provides explicit type definitions for the keyframe resolution logic within the animation system.

packages/framer-motion/src/animation · medium confidence

The development environment now includes new internal scripts to support the migration to Vite and enhanced testing workflows. A new bundle size checker (bundlesize.mjs) enforces size limits on the framer-motion and motion-dom packages by validating gzipped file sizes against configured thresholds. HTML test collection (collect-html-tests.js) has been added to automatically gather test fixtures for optimized appear, projection, and animate-layout scenarios. Additionally, a JSX runtime shim (jsxRuntimeShim.js) is provided to support React JSX compilation in the new build setup.

dev/inc · high confidence

The animation engine now supports a new effect system via \animate.addEffect()\, allowing custom animation targets beyond standard DOM elements. HTML and SVG elements are animated through dedicated \styleEffect\ and \svgEffect\ adapters, which share a single \MotionValueState\ per element to ensure consistency between \animate()\ calls and style updates. The \animateElement()\ function now drives DOM elements through these effects and the DOM keyframe resolver, enabling batched reads and unit conversion, while \handOffElementState()\ allows \VisualElement\ instances to take ownership of existing animation values for unified rendering.

packages/motion-dom/src/animation/animate · high confidence

The gesture subsystem has been restructured into dedicated modules (focus, hover, press) that leverage the new 'motion-dom' event utilities. Users can now rely on improved accessibility with the focus gesture, which respects the :focus-visible selector to ensure animations only trigger when focus is keyboard-visible. The press gesture now includes a fix to ignore events on disabled buttons and supports a new propagate option (propagate={{ tap: false }}) to prevent parent tap handlers from firing. The hover gesture utilizes passive event listeners for better performance.

packages/framer-motion/src/gestures · high confidence

The gesture handling in motion-dom has been refactored to introduce dedicated \press()\, \hover()\, and \drag\ utilities. The new \press\ gesture provides robust pointer-down/up handling with keyboard accessibility (Enter key support) and prevents parent tap handlers from firing via a \stopPropagation\ option. The \hover\ gesture improves interaction by defending against premature ending during active presses and filtering out touch events. Drag functionality now uses a shared state system to manage active axes and integrates with the new accessibility checks to ensure form controls and text inputs do not block drag initiation.

packages/motion-dom/src/gestures · high confidence

This update introduces several new hooks for managing motion values, including \useComputed\ for deriving values from other motion values, \useFollowValue\ for animating values with various transition types (spring, tween, inertia), \useMotionTemplate\ for combining values into string templates, and \useVelocity\ for tracking value speed. The existing \useSpring\ hook has been refactored to use \useFollowValue\ internally, simplifying its implementation while maintaining its spring animation behavior. Additionally, \useScroll\ has been enhanced with improved ref hydration handling and support for native scroll timelines where available, and \useInvertedScale\ is now deprecated in favor of the layout prop.

packages/framer-motion/src/value · high confidence

The optimized appear animation system now uses a dedicated handoff script to bridge the gap between server-side rendering and client-side hydration. This change introduces a new store-based architecture (\appearAnimationStore\) and a \handoffOptimizedAppearAnimation\ function that synchronizes animation start times and manages the lifecycle of animations during the hydration phase. Users benefit from more reliable appear animations that correctly handle timing discrepancies between the server and client, particularly in complex scenarios involving Suspense or portal elements, by ensuring animations are only started once the browser is ready to paint and are properly cancelled or resumed based on layout measurements.

packages/framer-motion/src/animation/optimized-appear · high confidence

The render module now includes a new types.ts file that defines core interfaces for the rendering system, including VisualElementOptions which introduces explicit support for SVG detection (isSVG) and animation skipping for testing (skipAnimations). This change establishes the type foundation for the VisualElement class and its configuration, separating render-specific types from the core motion logic.

packages/framer-motion/src/render · high confidence

The motion-dom package now uses a new style effect system that shares state between animate() and direct style calls, improving performance and consistency. This change introduces support for transform-origin properties (originX, originY, originZ) and non-destructive path rotation via the pathRotation channel. The new system also includes optimized transform building with cached string openers for \~5x faster spring retargeting, and properly handles CSS variables and HTML/SVG element styling through a unified effect interface.

packages/motion-dom/src/effects/style · high confidence

The motion-dom package now includes a suite of new utility functions in its utils directory to support core animation logic. Users benefit from improved iframe compatibility through new \isHTMLElement\, \isSVGElement\, and \isSVGSVGElement\ checks that rely on DOM properties rather than \instanceof\. The \resolveElements\ function provides a robust way to convert selectors or element lists into arrays, respecting animation scopes. Additionally, new \interpolate\ and \transform\ functions enable mapping input ranges to output values with support for easing and clamping, while \stagger\ allows for calculating delays based on element index and origin. A \delay\ utility is also added for frame-accurate timeouts, and \borderRadius\ props are centralized for consistent handling.

packages/motion-dom/src/utils · high confidence

The \packages/motion-dom/src/value/types\ directory has been restructured to introduce a modular value-type system that handles parsing, testing, and transforming CSS values for animation. This change adds dedicated modules for color formats (hex, rgba, hsla), complex values (including filters and masks), and dimensional units (px, %, deg, vw, vh). It also introduces a mapping layer (\maps/defaults.ts\) that associates specific CSS properties (like \width\, \color\, \filter\) with their corresponding value types, and provides utilities to find the correct type for a given value. This new architecture enables more robust handling of animatable values, including specific fixes for \calc()\ expressions to prevent division-by-zero errors and improved support for CSS logical properties.

packages/motion-dom/src/value/types · high confidence

The library now uses a dedicated \WillChangeMotionValue\ to manage the CSS \will-change\ property, restricting it to only track \transform\ properties. This change ensures that \will-change\ is set to \transform\ only when a transform animation is active, and reverts to \auto\ otherwise, reducing unnecessary browser repaints and improving performance for non-transform animations.

packages/framer-motion/src/value/use-will-change · high confidence

The projection node system has been moved from framer-motion to the motion-dom package, with framer-motion now importing rootProjectionNode from motion-dom. This refactor introduces two new hooks, useInstantLayoutTransition and useResetProjection, which manage the root projection node's update state and tree reset functionality respectively, decoupling core projection mechanics from the main library.

packages/framer-motion/src/projection · high confidence

Core projection utilities—including axis iteration, depth comparison, flat-tree management, transform detection, and viewport/page box measurement—have been relocated from framer-motion to the motion-dom package. This change consolidates low-level projection logic within motion-dom, ensuring that the motion-dom package provides the foundational utilities required for element projection and layout calculations.

packages/motion-dom/src/projection/utils · high confidence

The library now includes a new \useReducedMotion\ hook that detects the device's reduced motion preference and actively warns developers in development mode if animations are disabled, helping to identify potential UX issues. Additionally, the reduced-motion utilities have been updated with the 'use client' directive to ensure compatibility with React Server Components.

packages/framer-motion/src/utils/reduced-motion · high confidence

The animation system now uses a dedicated set of utilities in \packages/motion-dom/src/animation/keyframes/offsets\ to manage keyframe timing, including new functions to generate default offsets, fill gaps between existing offsets, and convert normalized offsets to time values. Additionally, \packages/motion-utils/src/types/geometry\ introduces a suite of TypeScript interfaces (Point, Axis, Box, BoundingBox, AxisDelta, Delta) and a TransformPoint type to provide structured type definitions for geometric calculations and transformations.

packages/motion-dom/src/animation/keyframes/offsets, packages/motion-utils/src/types · high confidence

The internal utilities for handling DOM props and identifying SVG components have been restructured. The new \filterProps\ function in \filter-props.ts\ now explicitly handles the forwarding of motion-specific props, supports custom prop validation via an \isValidProp\ callback, and prevents invalid props like \values\ from leaking into the DOM when used with SVG elements. Additionally, \is-svg-component.ts\ introduces a stricter heuristic for detecting SVG components by checking against a list of lowercase SVG tags and identifying custom components by capitalization, ensuring that only appropriate elements are treated as SVGs during rendering.

packages/framer-motion/src/render/dom/utils · medium confidence

The HTML rendering layer has been restructured to improve compatibility with React Server Components and streamline internal logic. New files in the render/html directory introduce explicit type definitions for all standard HTML elements and establish a dedicated visual state hook marked with the 'use client' directive, ensuring correct client-side execution boundaries. The props handling logic has been updated to automatically manage accessibility and interaction behaviors, such as setting tabIndex for tap events and disabling text selection during drag operations, while the underlying render state creation has been modularized for better maintainability.

packages/framer-motion/src/render/html · high confidence

The MotionContext implementation has been restructured into separate files (create.ts, index.ts, utils.ts) and updated with the 'use client' directive to ensure compatibility with React Server Components. This change allows framer-motion to function correctly in RSC environments by explicitly marking the context logic as client-side code, while also consolidating variant resolution logic into a dedicated utility function.

packages/framer-motion/src/context/MotionContext · high confidence

The SVG rendering module has been restructured to improve type safety and runtime performance. New files define explicit lists of supported SVG elements and their attributes, while type definitions now correctly map motion props to SVG components. The rendering logic has been updated to use a dedicated SVG render state and attribute builder, ensuring that SVG-specific attributes are handled consistently during animations.

packages/framer-motion/src/render/svg · high confidence

The \animate()\ function has been refactored to support animating plain JavaScript objects (not just DOM elements) by introducing an \ObjectTarget\ type and a new effect-driven resolution system. Additionally, animation sequences now support callback functions as segments, which are executed via MotionValue change listeners, and the \onComplete\ callback is guaranteed to fire once after the entire group finishes. The implementation also gracefully handles null/undefined subjects and respects \reduceMotion\ and \skipAnimations\ options passed through the scoped animate instance.

packages/framer-motion/src/animation/animate · high confidence

The animation core in \motion-dom\ has been restructured to improve performance and accuracy. A new \AsyncMotionValueAnimation\ class now handles asynchronous keyframe resolution, ensuring animations start at the correct time to avoid visual jumps. A new \FollowAnimation\ class provides a lightweight, shared-frame-tick mechanism for values that follow a target, significantly speeding up spring retargeting. The existing \JSAnimation\ and \NativeAnimation\ classes have been refined to share generator velocity sampling, use manual start times for accurate elapsed time tracking, and better handle WAAPI interruptions and final style commits.

packages/motion-dom/src/animation · high confidence

The animation generator utilities have been restructured to improve how keyframe durations are calculated and how velocity is sampled. A new \calcGeneratorDuration\ function now enforces a maximum duration (20 seconds) to prevent infinite loops during keyframe generation, while \pregenerateKeyframes\ uses a tighter 10-second limit and 10ms time step for precomputed animations. Velocity calculation has been split into \getGeneratorVelocity\ for finite-difference sampling and \calcGeneratorVelocity\ to handle both analytical (spring) and numerical velocity, ensuring consistent velocity data is available for animations like JSAnimation and FollowAnimation. Additionally, \createGeneratorEasing\ now leverages these utilities to generate easing functions from generators, and an \isGenerator\ type guard has been added to identify valid generator factories.

packages/motion-dom/src/animation/generators/utils · high confidence

The animation engine in the motion-dom package has been refactored to improve performance and reduce bundle size. The spring generator now uses an analytical approach for rest detection and includes optimized fast paths for underdamped springs, making retargeting significantly faster. A new inertia generator has been introduced to handle momentum-based animations with configurable power, damping, and bounce parameters. Additionally, the keyframes generator now features a specialized fast path for simple two-keyframe tweens to reduce overhead. These changes result in smoother animations and a smaller library footprint.

packages/motion-dom/src/animation/generators · high confidence

The animation sequence logic in \packages/framer-motion/src/animation/sequence\ has been refactored to improve type safety and callback management. The \create.ts\ module now explicitly handles timeline labels, relative/absolute time offsets, and spring easing generation within the sequence parsing loop. Concurrently, \types.ts\ introduces strict type definitions for sequence segments, explicitly disallowing lifecycle callbacks (like \onComplete\, \onUpdate\) on individual segment options in favor of sequence-level options defined in \SequenceOptions\. This change ensures that callbacks are fired correctly at the sequence level rather than being lost or misapplied to individual segments.

packages/framer-motion/src/animation/sequence · high confidence

The animation rendering utilities in motion-dom have been restructured to improve how variants and animation states are managed. A new \animation-state.ts\ module centralizes the logic for tracking animation state, handling protected keys to prevent conflicts between animation types, and managing resets for scenarios like StrictMode or Suspense. Variant resolution has been split into dedicated utilities (\get-variant-context\, \resolve-dynamic-variants\, \resolve-variants\) to cleanly separate context inheritance from target resolution, supporting dynamic variant functions that receive current value state and velocity. Additional helpers like \is-controlling-variants\ and \is-forced-motion-value\ clarify when elements participate in variant animations or require specific motion value handling, while \update-motion-values-from-props\ ensures motion values are correctly synced with prop changes.

packages/motion-dom/src/render/utils · high confidence

The event system in framer-motion has been refactored to improve performance and compatibility. Pointer events now automatically filter for the primary pointer, ensuring that multi-touch interactions do not trigger unintended animations. Additionally, a new \useDomEvent\ hook has been introduced, which attaches listeners directly to the DOM bypassing React's synthetic event system; this hook includes the 'use client' directive to ensure compatibility with React Server Components.

packages/framer-motion/src/events · high confidence

The frame loop in motion-dom has been refactored to improve performance and reduce per-frame memory allocations. The new implementation uses a batcher that reuses queue sets to avoid garbage collection overhead and unrolls the render loop for better execution speed. It introduces a synchronous time-tracking utility to ensure consistent timestamps within a single frame and adds support for immediate scheduling of callbacks within the current step. These changes result in faster animation retargeting and more efficient frame scheduling for users.

packages/motion-dom/src/frameloop · high confidence

The animation system now resolves CSS variable values by sampling the element's computed style and handles unit conversions (such as between pixels and other units) by measuring the element's computed style rather than relying on bounding box dimensions. This change improves the accuracy of animations involving CSS variables and mixed unit types, ensuring smoother transitions and preventing crashes in non-browser environments by guarding window access.

packages/motion-dom/src/animation/keyframes · high confidence

The keyframe utility module has been restructured into specific helper files to improve code organization and maintainability. New utilities include \applyPxDefaults\ for automatically appending 'px' units to numeric values where appropriate, \fillWildcards\ to propagate previous keyframe values to undefined slots, \isNone\ for robust detection of null/zero/none states, and \makeNoneKeyframesAnimatable\ to convert 'none' keyframes into animatable zero-equivalents based on surrounding complex values. Additionally, \unit-conversion.ts\ now centralizes logic for measuring dimensions from computed styles (handling box-sizing correctly) and removing non-translational transforms before measurement, replacing previous ad-hoc implementations.

packages/motion-dom/src/animation/keyframes/utils · high confidence

The \motion\ component implementation has been restructured to use a new \createMotionComponent\ factory function, which now explicitly supports an optional \type\ option to force SVG rendering for custom components that are otherwise auto-detected as HTML. The component's props and style types have been consolidated into dedicated \MotionProps\ and \MotionStyle\ interfaces, enhancing type safety for motion values and CSS properties.

packages/framer-motion/src/motion · high confidence

The motion-dom package has undergone a significant internal refactoring, moving core type definitions (such as MotionNodeAnimationOptions and LegacyAnimationControls) into a dedicated types file and restructuring gesture-related props. This change introduces new layout animation capabilities, including axis-specific constraints (layout="x"/"y"), relative projection via layoutAnchor, and curve customization through layoutCurve. Additionally, gesture handling has been updated: the stopTapPropagation prop is replaced by a propagate={{ tap: false }} configuration, and drag snapping now supports per-axis control ("x" or "y"). Event types for hover interactions have also been corrected to use PointerEvent instead of MouseEvent for better accuracy.

packages/motion-dom/src/node · medium confidence

The pan gesture logic has been restructured to use a new \PanSession\ class, which centralizes pointer event tracking, scroll compensation, and state management. This change introduces support for per-axis \dragSnapToOrigin\ (accepting 'x' or 'y') and a configurable \distanceThreshold\ to control when panning begins. Additionally, pointer events are now captured in the capture phase to ensure gestures end correctly even if descendants stop propagation, and event handlers are batched using \frame.update\ to align with React's rendering cycle.

packages/framer-motion/src/gestures/pan · high confidence

The scroll offset calculation logic in \packages/framer-motion/src/render/dom/scroll/offsets\ has been rewritten to support a wider range of input formats, including \vw\, \vh\, percentages, and named presets like \start\, \center\, and \end\. This change also introduces specific handling for SVG elements within the offset calculation chain, ensuring correct inset measurements for SVG targets and their parents. Users can now define scroll triggers using these more expressive units and presets, and animations involving SVG elements should calculate scroll positions more accurately.

packages/framer-motion/src/render/dom/scroll/offsets · high confidence

The library now more precisely determines when to use the browser's Web Animations API (WAAPI) for performance. It explicitly supports browser-only CSS color formats (oklch, oklab, lab, lch) by forcing WAAPI for these values, which the JavaScript animation path cannot parse. Additionally, it introduces a check for partial keyframe support and ensures that WAAPI is not used for elements in different timing contexts (such as iframes or popups) by relying on specific instanceof checks, preventing synchronization issues. It also excludes animations with custom transform templates or onUpdate callbacks from WAAPI acceleration.

packages/motion-dom/src/animation/waapi/supports · high confidence

The Reorder.Group component now accepts an axis prop that can be set to "xy", enabling items to be reordered in a wrapped, two-dimensional layout rather than just a single line. This change also introduces automatic scrolling within the group container when dragging items near the edges, ensuring smooth interaction for dense lists. Additionally, Reorder.Item now exposes a layout prop to control layout animation behavior during these multidimensional drags.

packages/framer-motion/src/components/Reorder · high confidence

The SVG rendering logic, including the \SVGVisualElement\ class and its associated types, has been moved into the \motion-dom\ package. This change centralizes how SVG elements are handled, specifically enabling the reading of CSS properties from styles (fixing issue \#3779) and ensuring that SVG attributes and styles are correctly applied during animations.

packages/motion-dom/src/render/svg · high confidence

The SVG effect system has been updated to apply unitless values to stroke-dasharray and stroke-dashoffset properties, resolving a zoom rendering bug in Safari. This change ensures that path-based animations drive VisualElement values correctly through the animate() function while sharing state between animate() and the svgEffect. The implementation includes a new test suite to verify that attributes like attrX and attrScale are written with their default units, while path offset values remain unitless to maintain correct rendering behavior.

packages/motion-dom/src/effects/svg · high confidence

Framer Motion now accepts MotionValues directly as children of motion components, automatically rendering their current value and updating the DOM when the value changes. Additionally, SVG visual elements are now created with explicit type support, allowing for better handling of SVG-specific properties and animations through the new createDomVisualElement factory.

packages/framer-motion/src/render/dom · high confidence

The viewport feature has been refactored to use a new, dedicated IntersectionObserver-based implementation. This change introduces an \InViewFeature\ class that manages observer lifecycle and state, replacing previous logic. Users will see improved performance through observer caching and option-change detection, ensuring the viewport listener only updates when necessary. The new structure also clarifies the \whileInView\ animation state management and callback handling for viewport entry and exit.

packages/framer-motion/src/motion/features/viewport · high confidence

The animation engine now forces Web Animations API (WAAPI) acceleration for browser-only CSS color formats (oklch, oklab, lab, lch, color, color-mix, light-dark) to ensure correct rendering, while restricting general color acceleration to backgroundColor. It also adds support for CSS logical properties (inset, padding, margin) and fontSize in pixel-based value handling, and introduces utilities for generating linear easing strings and replacing unsupported easing functions.

packages/motion-dom/src/animation/waapi/utils · high confidence

When a component with AnimatePresence is removed and then immediately re-added, the enter animation now correctly replays from the initial state instead of continuing from where the exit animation left off. This ensures that elements re-entering the DOM after an exit animation has completed start their entrance animation from the correct visual position.

packages/framer-motion/src/motion/features/animation · high confidence

This change introduces a new SVG rendering utility layer in motion-dom that fixes a Safari-specific bug where stroke-dasharray and stroke-dashoffset values with units caused incorrect scaling during page zoom; the fix uses unitless values for these properties. Additionally, it consolidates SVG style handling by moving CSS property management (like opacity and transform) into the style object rather than attributes, ensures SVG tags are treated consistently with HTML tags for viewbox handling, and adds tests for the new motion value scraping logic.

packages/motion-dom/src/render/svg/utils · high confidence

Updates the SVG rendering utilities to use unitless values for stroke-dashoffset and stroke-dasharray properties, resolving a zoom bug in Safari. This change is supported by new tests for the buildSVGPath function and the introduction of a dedicated SVG render state creator.

packages/framer-motion/src/render/svg/utils · high confidence

The projection geometry logic has been restructured to resolve percentage-based x and y transform values within the transformBox function rather than transformAxis. This change fixes a bug where layout animations would break or behave incorrectly when parent elements used percentage values for positioning, ensuring that relative projections are calculated accurately during animations.

packages/motion-dom/src/projection/geometry · high confidence

Added Cypress integration test for React Server Components client usage; Added Cypress support files for custom commands; Added HTML integration tests for layout, appear, and projection animations; Added Playwright effect test pages for SVG and HTML attributes; Added Playwright end-to-end tests for animation and scroll behaviors; Added Playwright tests for AnimateView transition behaviors; Added Playwright tests for animateLayout shared element animations; Added Playwright tests for effects module; Added Playwright tests for hover, press, and resize gesture APIs; Added Playwright tests for view-target resolution and morph behaviors; Added comprehensive tests for AnimatePresence and presence hooks; Added comprehensive tests for the animate API and custom effects; Added optimized appear animation test scenarios; Added projection animation and scroll layout test demos; Added test coverage for WAAPI animation, transition inheritance, and React hooks; Added test coverage for WAAPI animator and CSS variables; Added test coverage for animation engine internals; Added test coverage for animation utility functions; Added test coverage for drag gesture behaviors and controls; Added test coverage for event handling utilities; Added test coverage for gesture handling behaviors; Added test coverage for inertia, keyframes, and spring animation generators; Added test coverage for motion value primitives and spring animation behavior; Added test fixtures for AnimatePresence and animation behavior; Added test suite for projection node system in motion-dom; Added test utilities for synchronous animation driver simulation; Added tests for DOM scroll tracking and scroll handler warnings; Added tests for HTML useProps hook; Added tests for HTMLVisualElement.readValue behavior; Added tests for LayoutGroup context ID propagation; Added tests for MotionConfig transition inheritance, custom prop validation, and animation control flags; Added tests for MotionContext utility functions; Added tests for Reorder component behavior and SSR rendering; Added tests for Reorder layout detection and insertion logic; Added tests for SVGVisualElement CSS property reading; Added tests for WAAPI support detection logic; Added tests for animation sequence creation; Added tests for border-radius and opacity value mixing; Added tests for getFinalKeyframe logic; Added tests for the animation effect registry and DOM element animation logic; Added tests for transform parsing logic; Added tests for useAnimate and useAnimatedState hooks; Added tests for variant inheritance logic and motion ref handling; Added tests for view transition name assignment and animation queue error handling; Added tests for will-change behavior and SSR compatibility; Added unit tests for HTML style and transform building utilities; Added unit tests for SVG property handling; Added unit tests for WAAPI easing utilities; Added unit tests for animation sequence utility functions; Added unit tests for animation state, variants, and flat-tree utilities; Added unit tests for drag constraint utilities; Added unit tests for framer-motion utility hooks and functions; Added unit tests for keyframe utility functions; Added unit tests for motion value hooks and utilities; Added unit tests for motion-dom effects and state management; Added unit tests for projection geometry utilities; Added unit tests for reduced motion listener initialization; Expanded Cypress E2E test coverage for animation and layout behaviors; Expanded test coverage for motion component behavior and edge cases.

The project has been restructured into a monorepo with the root package renamed to 'motion-one' and workspaces defined for 'packages/\' and 'dev/\'. The main 'motion' and 'framer-motion' packages are now version 13.4.0, with 'motion-dom' and 'motion-utils' at 13.3.0. Development environments have been added for HTML, Next.js, React 18, and React 19, utilizing Vite 6.4.2 and Next.js 15.5.24. The root build tooling has been upgraded to use Turborepo 2.x, Rollup 4.59.0, and TypeScript 5.4.3, replacing the previous Webpack-based setup.

(dependencies) · high confidence

The project now includes the Yarn 3.6.4 release binary (yarn-3.6.4.cjs) in the .yarn/releases directory, enabling the use of this specific Yarn version for package management.

.yarn/releases · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• First survey — no prior run to compare against. CAI 52.

• Code Health 83
• Architecture 59
• Maturity 58
• Readiness 52
• Security 70
• Accessibility 46

• 300 commits — 239 feature/other, 61 fixes

• (repo) — 67 commits
• (root) — 65 commits
• packages/motion-dom — 65 commits
• dev/html — 41 commits
• packages/framer-motion — 31 commits
• dev/react — 10 commits
• plans/issues — 7 commits
• dev/next — 6 commits
• packages/motion — 5 commits
• packages/motion-utils — 3 commits

• fix: Add fire-and-forget animateLayout regression fixture
• fix: Add regression test for #2833 (motion.div + position:fixed)
• fix: Fix #1400: Add multidimensional Reorder support
• fix: Fix #2652: remove automatic prop validator loading
• fix: Fix #2652: scope custom prop validation
• fix: Fix #3777: complete propagated exits without children
• fix: Fix #3779: consolidate SVG style properties
• fix: Fix #3779: keep SVG opacity rendering in CSS
• fix: Fix #3779: read SVG CSS properties from styles
• fix: Fix AnimatePresence reordering present children when others exit
• fix: Fix Turbopack OOM by avoiding duplicate-source re-export in motion/react
• fix: Fix animateView() target-resolution bugs from review
• fix: Fix drag origin when AnimatePresence initial={false} blocks initial
• fix: Fix duplicate view-transition-name when a paired .add() from survives
• fix: Fix lint in unit mixer regex and MotionValue.start
• fix: Fix open snap: morph the hero to its rendered corner radii
• fix: Fix plus-lighter brightness flash on morph crossfades
• fix: Fix spurious React 18.3 ref warning in AnimatePresence non-popLayout mode
• fix: Fix stranded drag transform after layout swap in React 19
• fix: Fix useScroll falling back to window scroll when ref hydrates late
• …and 280 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

motiondivision/motion was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.