motion 13.2.0 → 13.4.0

package/README.md

@@ -54,6 +54,34 @@ Get started with [Motion for React](https://motion.dev/docs/react).
 
 **Note:** Framer Motion is now Motion. Import from `motion/react` instead of `framer-motion`.
 
+#### View transitions
+
+`AnimateView` is available from a separate entry point and requires React and React DOM 19.3 or later. Other Motion React APIs continue to support React 18.
+
+```jsx
+import { AnimateView } from "motion/react-animate-view"
+import { startTransition, useState } from "react"
+
+function View() {
+    const [show, setShow] = useState(false)
+
+    return (
+        <>
+            <button onClick={() => startTransition(() => setShow(!show))}>
+                Toggle
+            </button>
+            {show && (
+                <AnimateView transition={{ duration: 0.4 }}>
+                    <div>Hello</div>
+                </AnimateView>
+            )}
+        </>
+    )
+}
+```
+
+Existing Motion+ users can replace `motion-plus/animate-view` imports with `motion/react-animate-view`.
+
 ### JS
 
 ```javascript

package/dist/cjs/react-animate-view.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var animateView = require('framer-motion/animate-view');
+
+
+
+Object.keys(animateView).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return animateView[k]; }
+	});
+});

package/dist/cjs/three.js

@@ -19,7 +19,7 @@ var dom = require('framer-motion/dom');
  * Writes happen once per frame in `frame.preRender`, ahead of render loops
  * scheduled with `frame.render`.
  */
-const threeEffect = dom.createEffect((subject, state, key, value) => state.set(key, value, () => setObjectValue(subject, key, state.latest[key]), undefined, false), {
+const threeEffect = dom.createEffect((subject, state, key, value) => state.set(key, value, () => setObjectValue(subject, key, value.get())), {
     test: isThreeSubject,
     read: getObjectValue,
     step: dom.frame.preRender,

package/dist/cjs/vgpu.js

@@ -50,10 +50,10 @@ function flush() {
  */
 const vgpuEffect = dom.createEffect((subject, state, key, value) => state.set(key, value, () => {
     const bag = pending.get(subject) ?? {};
-    bag[key] = state.latest[key];
+    bag[key] = value.get();
     pending.set(subject, bag);
     dom.frame.preRender(flush, false, true);
-}, undefined, false), {
+}), {
     test: isVGPUSubject,
     read: readInitial,
     step: dom.frame.preRender,

package/dist/es/react-animate-view.mjs

@@ -0,0 +1,2 @@
+"use client";
+export * from 'framer-motion/animate-view';

package/dist/es/three.mjs

@@ -15,7 +15,7 @@ import { createEffect, frame } from 'framer-motion/dom';
  * Writes happen once per frame in `frame.preRender`, ahead of render loops
  * scheduled with `frame.render`.
  */
-const threeEffect = createEffect((subject, state, key, value) => state.set(key, value, () => setObjectValue(subject, key, state.latest[key]), undefined, false), {
+const threeEffect = createEffect((subject, state, key, value) => state.set(key, value, () => setObjectValue(subject, key, value.get())), {
     test: isThreeSubject,
     read: getObjectValue,
     step: frame.preRender,

package/dist/es/vgpu.mjs

@@ -46,10 +46,10 @@ function flush() {
  */
 const vgpuEffect = createEffect((subject, state, key, value) => state.set(key, value, () => {
     const bag = pending.get(subject) ?? {};
-    bag[key] = state.latest[key];
+    bag[key] = value.get();
     pending.set(subject, bag);
     frame.preRender(flush, false, true);
-}, undefined, false), {
+}), {
     test: isVGPUSubject,
     read: readInitial,
     step: frame.preRender,