[pull] main from motiondivision:main

CHANGELOG.md

@@ -4,10 +4,17 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
-## [12.34.0] 2026-02-09
+## [12.34.1] 2026-02-17
 
 ### Fixed
 
+-   `useScroll`: Ensure animations aren't hardware accelerated when `target` is set.
+-   Improve animatable `"none"` generation for mask values.
+
+## [12.34.0] 2026-02-09
+
+### Added
+
 -   `useScroll`: Hardware accelerated animations.
 
 ## [12.33.2] 2026-02-06

dev/html/package.json

@@ -1,7 +1,7 @@
 {
     "name": "html-env",
     "private": true,
-    "version": "12.34.0",
+    "version": "12.34.1",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -10,9 +10,9 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.34.0",
-        "motion": "^12.34.0",
-        "motion-dom": "^12.34.0",
+        "framer-motion": "^12.34.1",
+        "motion": "^12.34.1",
+        "motion-dom": "^12.34.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

dev/next/package.json

@@ -1,7 +1,7 @@
 {
     "name": "next-env",
     "private": true,
-    "version": "12.34.0",
+    "version": "12.34.1",
     "type": "module",
     "scripts": {
         "dev": "next dev",
@@ -10,7 +10,7 @@
         "build": "next build"
     },
     "dependencies": {
-        "motion": "^12.34.0",
+        "motion": "^12.34.1",
         "next": "15.5.10",
         "react": "19.0.0",
         "react-dom": "19.0.0"

dev/react-19/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-19-env",
     "private": true,
-    "version": "12.34.0",
+    "version": "12.34.1",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,7 +11,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "motion": "^12.34.0",
+        "motion": "^12.34.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },

dev/react/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-env",
     "private": true,
-    "version": "12.34.0",
+    "version": "12.34.1",
     "type": "module",
     "scripts": {
         "dev": "yarn vite",
@@ -11,7 +11,7 @@
         "preview": "yarn vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.34.0",
+        "framer-motion": "^12.34.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

dev/react/src/tests/scroll-target-transform.tsx

@@ -0,0 +1,44 @@
+import { motion, useScroll, useTransform } from "framer-motion"
+import * as React from "react"
+import { useRef } from "react"
+
+export const App = () => {
+    const targetRef = useRef<HTMLDivElement>(null)
+    const { scrollYProgress } = useScroll({
+        target: targetRef,
+        offset: ["start end", "end start"],
+    })
+
+    const opacity = useTransform(scrollYProgress, [0, 1], [1, 0])
+    const y = useTransform(scrollYProgress, [0, 1], [0, -100])
+
+    return (
+        <>
+            <div style={spacer} />
+            <div ref={targetRef} style={targetStyle}>
+                <motion.div
+                    id="target"
+                    style={{ ...box, opacity, y }}
+                />
+            </div>
+            <div style={spacer} />
+            <div style={spacer} />
+            <span id="has-accelerate">
+                {scrollYProgress.accelerate ? "true" : "false"}
+            </span>
+        </>
+    )
+}
+
+const spacer = { height: "100vh" }
+const targetStyle: React.CSSProperties = {
+    height: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+}
+const box: React.CSSProperties = {
+    width: 100,
+    height: 100,
+    background: "red",
+}

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "12.34.0",
+  "version": "12.34.1",
   "packages": [
     "packages/*",
     "dev/*"

packages/framer-motion/cypress/integration/scroll-accelerate.ts

@@ -4,7 +4,10 @@ describe("scroll timeline WAAPI acceleration", () => {
             .wait(200)
             .get("#direct-accelerated")
             .should(([$el]: any) => {
-                expect($el.innerText).to.equal("true")
+                const expected = (window as any).ScrollTimeline
+                    ? "true"
+                    : "false"
+                expect($el.innerText).to.equal(expected)
             })
     })
 
@@ -16,7 +19,10 @@ describe("scroll timeline WAAPI acceleration", () => {
                 // backgroundColor gets accelerate config propagated,
                 // but VisualElement skips WAAPI creation since it's
                 // not in the acceleratedValues set
-                expect($el.innerText).to.equal("true")
+                const expected = (window as any).ScrollTimeline
+                    ? "true"
+                    : "false"
+                expect($el.innerText).to.equal(expected)
             })
     })
 

packages/framer-motion/cypress/integration/scroll-target-transform.ts

@@ -0,0 +1,31 @@
+describe("useScroll with target does not set accelerate", () => {
+    it("Does not set accelerate when target is provided", () => {
+        cy.visit("?test=scroll-target-transform")
+            .wait(200)
+            .get("#has-accelerate")
+            .should(([$el]: any) => {
+                expect($el.innerText).to.equal("false")
+            })
+    })
+
+    it("Opacity updates via useTransform when scrolling", () => {
+        cy.visit("?test=scroll-target-transform")
+            .wait(200)
+            .get("#target")
+            .should(([$el]: any) => {
+                // Before scrolling, opacity should be near initial value
+                const initialOpacity = parseFloat(
+                    getComputedStyle($el).opacity
+                )
+                expect(initialOpacity).to.be.greaterThan(0)
+            })
+        cy.scrollTo("bottom", { duration: 300 })
+            .wait(200)
+            .get("#target")
+            .should(([$el]: any) => {
+                // After scrolling, opacity should have changed
+                const opacity = parseFloat(getComputedStyle($el).opacity)
+                expect(opacity).to.be.lessThan(1)
+            })
+    })
+})

packages/framer-motion/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "12.34.0",
+    "version": "12.34.1",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -88,7 +88,7 @@
         "measure": "rollup -c ./rollup.size.config.mjs"
     },
     "dependencies": {
-        "motion-dom": "^12.34.0",
+        "motion-dom": "^12.34.1",
         "motion-utils": "^12.29.2",
         "tslib": "^2.4.0"
     },

packages/framer-motion/src/render/dom/scroll/utils/can-use-native-timeline.ts

@@ -0,0 +1,7 @@
+import { supportsScrollTimeline } from "motion-dom"
+
+export function canUseNativeTimeline(target?: Element) {
+    return (
+        typeof window !== "undefined" && !target && supportsScrollTimeline()
+    )
+}

packages/framer-motion/src/render/dom/scroll/utils/get-timeline.ts

@@ -1,6 +1,7 @@
-import { ProgressTimeline, supportsScrollTimeline } from "motion-dom"
+import { ProgressTimeline } from "motion-dom"
 import { scrollInfo } from "../track"
 import { ScrollOptionsWithDefaults } from "../types"
+import { canUseNativeTimeline } from "./can-use-native-timeline"
 
 declare global {
     interface Window {
@@ -50,7 +51,7 @@ export function getTimeline({
 
     if (!targetCache[axisKey]) {
         targetCache[axisKey] =
-            !options.target && supportsScrollTimeline()
+            canUseNativeTimeline(options.target)
                 ? new ScrollTimeline({ source: container, axis } as any)
                 : scrollTimelineFallback({ container, ...options })
     }

packages/framer-motion/src/value/__tests__/use-scroll.test.tsx

@@ -0,0 +1,88 @@
+import { supportsFlags } from "motion-dom"
+import { useRef } from "react"
+import { render } from "../../jest.setup"
+import { useScroll } from "../use-scroll"
+import { useTransform } from "../use-transform"
+
+describe("useScroll accelerate", () => {
+    afterEach(() => {
+        supportsFlags.scrollTimeline = undefined
+    })
+
+    test("sets accelerate on progress values when ScrollTimeline is supported and no target", () => {
+        supportsFlags.scrollTimeline = true
+
+        let accelerateX: any
+        let accelerateY: any
+
+        const Component = () => {
+            const { scrollXProgress, scrollYProgress } = useScroll()
+            accelerateX = scrollXProgress.accelerate
+            accelerateY = scrollYProgress.accelerate
+            return null
+        }
+
+        render(<Component />)
+
+        expect(accelerateX).toBeDefined()
+        expect(accelerateY).toBeDefined()
+    })
+
+    test("does not set accelerate when target ref is provided", () => {
+        supportsFlags.scrollTimeline = true
+
+        let accelerateX: any
+        let accelerateY: any
+
+        const Component = () => {
+            const target = useRef<HTMLDivElement>(null)
+            const { scrollXProgress, scrollYProgress } = useScroll({
+                target,
+            })
+            accelerateX = scrollXProgress.accelerate
+            accelerateY = scrollYProgress.accelerate
+            return <div ref={target} />
+        }
+
+        render(<Component />)
+
+        expect(accelerateX).toBeUndefined()
+        expect(accelerateY).toBeUndefined()
+    })
+
+    test("does not set accelerate when ScrollTimeline is not supported", () => {
+        supportsFlags.scrollTimeline = false
+
+        let accelerateX: any
+        let accelerateY: any
+
+        const Component = () => {
+            const { scrollXProgress, scrollYProgress } = useScroll()
+            accelerateX = scrollXProgress.accelerate
+            accelerateY = scrollYProgress.accelerate
+            return null
+        }
+
+        render(<Component />)
+
+        expect(accelerateX).toBeUndefined()
+        expect(accelerateY).toBeUndefined()
+    })
+
+    test("propagates accelerate through useTransform", () => {
+        supportsFlags.scrollTimeline = true
+
+        let transformAccelerate: any
+
+        const Component = () => {
+            const { scrollYProgress } = useScroll()
+            const opacity = useTransform(scrollYProgress, [0, 1], [0, 1])
+            transformAccelerate = opacity.accelerate
+            return null
+        }
+
+        render(<Component />)
+
+        expect(transformAccelerate).toBeDefined()
+    })
+})