framer-motion 12.20.2 → 12.20.4

package/README.md

@@ -1,7 +1,11 @@
 <p align="center">
-  <img width="100" height="100" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
+  <img width="42" height="42" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
 </p>
 <h1 align="center">Motion for React</h1>
+<h3 align="center">
+  An open source, production-ready animation library
+</h3>
+<p align="center">Previously Framer Motion. Also available for <a href="https://github.com/motiondivision/motion/tree/main/packages/motion">JavaScript</a> and <a href="https://github.com/motiondivision/motion-vue">Vue</a></p>
 
 <br>
 
@@ -12,13 +16,11 @@
   <a href="https://www.npmjs.com/package/framer-motion" target="_blank">
   <img src="https://img.shields.io/npm/dm/framer-motion.svg?style=flat-square" />
   </a>
-  <a href="https://twitter.com/motiondotdev" target="_blank">
-  <img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow"  />
+  <a href="https://twitter.com/mattgperry" target="_blank">
+  <img src="https://img.shields.io/twitter/follow/mattgperry.svg?style=social&label=Follow"  />
   </a>
 </p>
 
-<br>
-<hr>
 <br>
 
 Motion for React is an open source, production-ready library that’s designed for all creative developers.
@@ -52,22 +54,47 @@ It does all this:
 
 ### 🐇 Quick start
 
-Install `motion` via your package manager:
-
-```
+```bash
 npm install motion
 ```
 
-Then import the `motion` component:
-
 ```jsx
 import { motion } from "motion/react"
 
-export function Component({ isVisible }) {
-    return <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
+function Component() {
+    return <motion.div animate={{ x: 100 }} />
 }
 ```
 
+Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
+
+## 🎨 Studio
+
+![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
+
+Motion Studio is a versatile suite of developer tools allowing you to:
+
+-   Visually edit CSS and Motion easing curves in VS Code
+-   Generate CSS springs with LLMs
+-   Load Motion docs into your LLM
+
+Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
+
+## 🎓 Examples
+
+[Motion Examples](https://examples.motion.dev/react) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kickstart your next project.
+
+## ⚡️ Motion+
+
+[Motion+](https://motion.dev/plus) is a one-time fee, lifetime membership that unlocks over 100 premium examples, early access, powerful Studio tools, a private Discord, and exclusive APIs like:
+
+-   Cursor
+-   Ticker
+-   AnimateNumber
+-   splitText
+
+[Get Motion+](https://motion.dev/plus)
+
 ### 💎 Contribute
 
 -   Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-C4jfsA_8.js');
+var create = require('./create-7q3QlJ1Z.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-C4jfsA_8.js → create-7q3QlJ1Z.js}

@@ -1323,25 +1323,27 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                 this.nodes.forEach(clearIsLayoutDirty);
                 return;
             }
+            this.animationCommitId = this.animationId;
             if (!this.isUpdating) {
                 this.nodes.forEach(clearIsLayoutDirty);
             }
-            this.animationCommitId = this.animationId;
-            this.isUpdating = false;
-            /**
-             * Write
-             */
-            this.nodes.forEach(resetTransformStyle);
-            /**
-             * Read ==================
-             */
-            // Update layout measurements of updated children
-            this.nodes.forEach(updateLayout);
-            /**
-             * Write
-             */
-            // Notify listeners that the layout is updated
-            this.nodes.forEach(notifyLayoutUpdate);
+            else {
+                this.isUpdating = false;
+                /**
+                 * Write
+                 */
+                this.nodes.forEach(resetTransformStyle);
+                /**
+                 * Read ==================
+                 */
+                // Update layout measurements of updated children
+                this.nodes.forEach(updateLayout);
+                /**
+                 * Write
+                 */
+                // Notify listeners that the layout is updated
+                this.nodes.forEach(notifyLayoutUpdate);
+            }
             this.clearAllSnapshots();
             /**
              * Manually flush any pending updates. Ideally
@@ -1404,7 +1406,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
         updateLayout() {
             if (!this.instance)
                 return;
-            // TODO: Incorporate into a forwarded scroll offset
             this.updateScroll();
             if (!(this.options.alwaysMeasureLayout && this.isLead()) &&
                 !this.isLayoutDirty) {
@@ -2675,7 +2676,7 @@ function initPrefersReducedMotion() {
     if (window.matchMedia) {
         const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
         const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
-        motionMediaQuery.addListener(setReducedMotionPreferences);
+        motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
         setReducedMotionPreferences();
     }
     else {
@@ -3408,10 +3409,20 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
 }
 
 function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
+    const elementStyle = element.style;
+    let key;
+    for (key in style) {
+        // CSSStyleDeclaration has [index: number]: string; in the types, so we use that as key type.
+        elementStyle[key] = style[key];
+    }
+    const projectionStyle = projection?.getProjectionStyles(styleProp);
+    for (key in projectionStyle) {
+        elementStyle[key] = projectionStyle[key];
+    }
+    for (key in vars) {
+        // Loop over any CSS variables and assign those.
+        // They can only be assigned using `setProperty`.
+        elementStyle.setProperty(key, vars[key]);
     }
 }
 
@@ -5093,6 +5104,11 @@ class PanGesture extends Feature {
  */
 const SwitchLayoutGroupContext = React.createContext({});
 
+/**
+ * Track whether we've taken any snapshots yet. If not,
+ * we can safely skip notification of didUpdate.
+ */
+let hasTakenAnySnapshot = false;
 class MeasureLayoutWithContext extends React.Component {
     /**
      * This only mounts projection nodes for components that
@@ -5109,7 +5125,9 @@ class MeasureLayoutWithContext extends React.Component {
             if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
                 switchLayoutGroup.register(projection);
             }
-            projection.root.didUpdate();
+            if (hasTakenAnySnapshot) {
+                projection.root.didUpdate();
+            }
             projection.addEventListener("animationComplete", () => {
                 this.safeToRemove();
             });
@@ -5133,6 +5151,7 @@ class MeasureLayoutWithContext extends React.Component {
          * perhaps in didUpdate
          */
         projection.isPresent = isPresent;
+        hasTakenAnySnapshot = true;
         if (drag ||
             prevProps.layoutDependency !== layoutDependency ||
             layoutDependency === undefined ||

package/dist/cjs/dom.js

@@ -747,7 +747,7 @@ function initPrefersReducedMotion() {
     if (window.matchMedia) {
         const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
         const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
-        motionMediaQuery.addListener(setReducedMotionPreferences);
+        motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
         setReducedMotionPreferences();
     }
     else {
@@ -1443,10 +1443,20 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
 }
 
 function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
+    const elementStyle = element.style;
+    let key;
+    for (key in style) {
+        // CSSStyleDeclaration has [index: number]: string; in the types, so we use that as key type.
+        elementStyle[key] = style[key];
+    }
+    const projectionStyle = projection?.getProjectionStyles(styleProp);
+    for (key in projectionStyle) {
+        elementStyle[key] = projectionStyle[key];
+    }
+    for (key in vars) {
+        // Loop over any CSS variables and assign those.
+        // They can only be assigned using `setProperty`.
+        elementStyle.setProperty(key, vars[key]);
     }
 }
 

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-C4jfsA_8.js');
+var create = require('./create-7q3QlJ1Z.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 

package/dist/dom.d.ts

@@ -1,4 +1,4 @@
-import { UnresolvedValueKeyframe, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationPlaybackControls, DynamicOption } from 'motion-dom';
+import { UnresolvedValueKeyframe, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, AnyResolvedKeyframe, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationPlaybackControls, DynamicOption } from 'motion-dom';
 export * from 'motion-dom';
 import { Easing, EasingFunction, Point } from 'motion-utils';
 export * from 'motion-utils';
@@ -44,7 +44,7 @@ interface SequenceOptions extends AnimationPlaybackOptions {
     defaultTransition?: Transition;
 }
 interface AbsoluteKeyframe {
-    value: string | number | null;
+    value: AnyResolvedKeyframe | null;
     at: number;
     easing?: Easing;
 }