code · pull · Feb 2, 2026 · Jan 28, 2026 · Feb 1, 2026 · Jan 28, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,17 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [12.30.0] 2026-02-02
+
+### Added
+
+-   `MotionConfig`: Add `skipAnimations` option.
+
+### Fixed
+
+-   `animate`: Prevent error when calling `stop()` on removed elements.
+-   `animateLayout`: Fixing shared element animations when `animate` called before `animateLayout`.
+
 ## [12.29.3] 2026-02-02
 
 ### Fixed

diff --git a/dev/html/package.json b/dev/html/package.json
@@ -1,7 +1,7 @@
 {
     "name": "html-env",
     "private": true,
-    "version": "12.29.3",
+    "version": "12.30.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -10,9 +10,9 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.29.3",
-        "motion": "^12.29.3",
-        "motion-dom": "^12.29.2",
+        "framer-motion": "^12.30.0",
+        "motion": "^12.30.0",
+        "motion-dom": "^12.30.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

diff --git a/dev/html/public/animate-layout/modal-open-after-animate.html b/dev/html/public/animate-layout/modal-open-after-animate.html
@@ -0,0 +1,243 @@
+<html>
+    <head>
+        <style>
+            * {
+                box-sizing: border-box;
+                margin: 0;
+                padding: 0;
+            }
+
+            body {
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                    sans-serif;
+                background: #1a1a1a;
+                color: #fff;
+                min-height: 100vh;
+                padding: 40px;
+            }
+
+            .card-list {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 20px;
+                list-style: none;
+                max-width: 800px;
+            }
+
+            .card {
+                width: 240px;
+                height: 320px;
+                cursor: pointer;
+                position: relative;
+            }
+
+            .card-content {
+                width: 100%;
+                height: 100%;
+                border-radius: 16px;
+                overflow: hidden;
+                background: #2a2a2a;
+                position: relative;
+            }
+
+            .card-image-container {
+                overflow: hidden;
+                height: 200px;
+                display: flex;
+                justify-content: stretch;
+                flex-direction: column;
+                position: relative;
+            }
+
+            .card-image {
+                width: 100%;
+                height: 240px;
+                background: #3b3b3b;
+                position: absolute;
+                top: -40px;
+            }
+
+            .title-container {
+                position: absolute;
+                top: 12px;
+                left: 12px;
+                max-width: 200px;
+            }
+
+            .title-container h2 {
+                color: #fff;
+                margin: 6px 0;
+                font-size: 16px;
+            }
+
+            .title-container span {
+                color: #fff;
+                font-size: 11px;
+                text-transform: uppercase;
+            }
+
+            .content-container {
+                padding: 20px;
+            }
+
+            .hidden {
+                display: none;
+            }
+
+            .card-content-container.open {
+                top: 200px;
+                left: 200px;
+                right: 0;
+                position: fixed;
+                z-index: 100;
+                padding: 40px 0;
+                justify-content: center;
+            }
+
+            .open .card-content {
+                width: unset;
+                height: unset;
+                max-width: 560px;
+                pointer-events: none;
+            }
+
+            .open .title-container {
+                top: 22px;
+                left: 22px;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 0.5;
+            }
+        </style>
+    </head>
+    <body>
+        <ul class="card-list">
+            <li class="card" data-id="b">
+                <div class="card-content" data-layout-id="card-container-b">
+                    <div
+                        class="card-image-container"
+                        data-layout-id="card-image-container-b"
+                    >
+                        <div
+                            class="card-image"
+                            data-layout-id="card-image-b"
+                            data-layout="preserve-aspect"
+                        ></div>
+                    </div>
+                    <div
+                        class="title-container"
+                        data-layout-id="title-container-b"
+                        data-layout="position"
+                    >
+                        <span>Hats</span>
+                        <h2>Take Control of Your Hat Life</h2>
+                    </div>
+                    <div class="content-container hidden" data-layout="position">
+                        <p>
+                            Stay up to date with the latest hat trends, get
+                            personalized hat care reminders, and use predictive
+                            analytics to discover the last place you left your
+                            hat.
+                        </p>
+                    </div>
+                </div>
+            </li>
+        </ul>
+
+        <script type="module" src="/src/imports/animate-layout.js"></script>
+        <script type="module" src="/src/imports/script-assert.js"></script>
+        <script type="module">
+            const { animateLayout, animate, frame } = window.AnimateLayout
+            const { showError, matchViewportBox } = window.Assert
+
+            let currentOpenId = null
+
+            // On page load - animate card with scale-corrected borderRadius
+            // This creates a VisualElement before animateLayout() is called
+            const cardContent = document.querySelector('.card-content')
+            animate(cardContent, { borderRadius: 16 }, { type: false })
+
+            function openCard(id) {
+                if (currentOpenId) {
+                    closeCard()
+                }
+
+                currentOpenId = id
+
+                const sourceCard = document.querySelector(
+                    `.card[data-id="${id}"]`
+                )
+                const clonedContent = sourceCard
+                    .querySelector(".card-content")
+                    .cloneNode(true)
+
+                clonedContent.id = "modal"
+
+                const expandedCardContainer = document.createElement("div")
+                expandedCardContainer.className = "card-content-container open"
+                expandedCardContainer.appendChild(clonedContent)
+
+                const contentContainer =
+                    expandedCardContainer.querySelector(".content-container")
+                contentContainer.classList.remove("hidden")
+
+                document.body.appendChild(expandedCardContainer)
+
+                // Animate modal with scale-corrected borderRadius
+                // This creates a VisualElement before animateLayout() processes it
+                const modalContent = expandedCardContainer.querySelector('.card-content')
+                animate(modalContent, { borderRadius: 16 }, { type: false })
+
+                return expandedCardContainer
+            }
+
+            function closeCard() {
+                if (!currentOpenId) return
+
+                const expandedCardContainer = document.querySelector(
+                    ".card-content-container.open"
+                )
+
+                if (expandedCardContainer) expandedCardContainer.remove()
+
+                currentOpenId = null
+            }
+
+            async function runTest() {
+                const openControls = await animateLayout(
+                    () => openCard("b"),
+                    { duration: 1, ease: "linear" }
+                )
+
+                openControls.pause()
+                openControls.time = 0.5
+
+                await new Promise((resolve) => frame.postRender(resolve))
+
+                matchViewportBox(
+                    document.querySelector("li .card-content"),
+                    document.querySelector(".card-content-container .card-content").getBoundingClientRect(),5
+                )
+
+                matchViewportBox(
+                    document.querySelector("li .card-content"),
+                    { top: 140, left: 120, right: 520, bottom: 449 },5
+                )
+
+                matchViewportBox(
+                    document.querySelector("li .title-container"),
+                    { top: 157, left: 137, right: 337, bottom: 220 },5
+                )
+
+                matchViewportBox(
+                    document.querySelector("li .title-container"),
+                    document.querySelector(".card-content-container .title-container").getBoundingClientRect(),5
+                )
+            }
+
+            runTest().catch(console.error)
+        </script>
+    </body>
+</html>
diff --git a/dev/html/public/playwright/animate/mini.html b/dev/html/public/playwright/animate/mini.html
@@ -35,6 +35,7 @@
         <div class="box" id="autoplay">autoplay</div>
         <div class="box" id="time">time</div>
         <div class="box" id="custom-easing">custom easing</div>
+        <div class="box" id="stop-after-remove">stop after remove</div>
         <script type="module" src="/src/inc.js"></script>
         <script type="module">
             const { animateMini, spring } = window.Motion
@@ -161,6 +162,35 @@
             customEasingFunction.pause()
             customEasingFunction.time = 0.1
             customEasingFunction.stop()
+
+            // Test stop() doesn't crash when element is removed from DOM (issue #3509)
+            const stopAfterRemoveElement = document.getElementById("stop-after-remove")
+            const stopAfterRemoveAnimation = animateMini(
+                stopAfterRemoveElement,
+                { opacity: [0, 1] },
+                { duration: 1 }
+            )
+
+            try {
+                // Remove element from DOM
+                stopAfterRemoveElement.remove()
+                // Stop animation - this should not throw
+                stopAfterRemoveAnimation.stop()
+                // If we get here without throwing, the test passed
+                // Create a new element to show success
+                const successElement = document.createElement("div")
+                successElement.id = "stop-after-remove-result"
+                successElement.className = "box"
+                successElement.textContent = "complete"
+                document.body.appendChild(successElement)
+            } catch (e) {
+                // If we catch an error, the test failed
+                const errorElement = document.createElement("div")
+                errorElement.id = "stop-after-remove-result"
+                errorElement.className = "box"
+                errorElement.textContent = "error: " + e.message
+                document.body.appendChild(errorElement)
+            }
         </script>
     </body>
 </html>
diff --git a/dev/html/src/imports/animate-layout.js b/dev/html/src/imports/animate-layout.js
@@ -2,6 +2,7 @@ import {
     LayoutAnimationBuilder,
     frame,
     parseAnimateLayoutArgs,
+    animate,
 } from "framer-motion/dom"
 
 export function unstable_animateLayout(
@@ -22,4 +23,5 @@ window.AnimateLayout = {
     animateLayout: unstable_animateLayout,
     LayoutAnimationBuilder,
     frame,
+    animate,
 }
diff --git a/dev/next/package.json b/dev/next/package.json
@@ -1,7 +1,7 @@
 {
     "name": "next-env",
     "private": true,
-    "version": "12.29.3",
+    "version": "12.30.0",
     "type": "module",
     "scripts": {
         "dev": "next dev",
@@ -10,7 +10,7 @@
         "build": "next build"
     },
     "dependencies": {
-        "motion": "^12.29.3",
+        "motion": "^12.30.0",
         "next": "15.4.10",
         "react": "19.0.0",
         "react-dom": "19.0.0"

diff --git a/dev/react-19/package.json b/dev/react-19/package.json
@@ -1,7 +1,7 @@
 {
     "name": "react-19-env",
     "private": true,
-    "version": "12.29.3",
+    "version": "12.30.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,7 +11,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "motion": "^12.29.3",
+        "motion": "^12.30.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },

diff --git a/dev/react/package.json b/dev/react/package.json
@@ -1,7 +1,7 @@
 {
     "name": "react-env",
     "private": true,
-    "version": "12.29.3",
+    "version": "12.30.0",
     "type": "module",
     "scripts": {
         "dev": "yarn vite",
@@ -11,7 +11,7 @@
         "preview": "yarn vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.29.3",
+        "framer-motion": "^12.30.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },