framer-motion 12.34.4 → 12.35.0

package/README.md

@@ -128,7 +128,7 @@ Motion drives the animations on the Cursor homepage, and is working with Cursor
 
 ### Gold
 
-<a href="https://lottiefiles.com"><img alt="LottieFiles" src="https://github.com/user-attachments/assets/4e99d8c7-4cba-43ee-93c5-93861ae708ec" width="200px" height="120px"></a>
+<a href="https://lottiefiles.com"><img alt="LottieFiles" src="https://github.com/user-attachments/assets/4e99d8c7-4cba-43ee-93c5-93861ae708ec" width="200px" height="120px"></a> <a href="https://mintlify.com"><img alt="Mintlify" src="https://github.com/user-attachments/assets/2740db2f-1877-49ae-ae80-ba5d19ef1587" width="200px" height="120px"></a>
 
 ### Silver
 

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var featureBundle = require('./feature-bundle-CUI5saed.js');
+var featureBundle = require('./feature-bundle-jADFMKLx.js');
 require('motion-dom');
 require('react');
 require('react/jsx-runtime');

package/dist/cjs/dom.js

@@ -629,6 +629,12 @@ const createScopedWaapiAnimate = (scope) => {
 };
 const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
 
+function canUseNativeTimeline(target) {
+    if (typeof window === "undefined")
+        return false;
+    return target ? motionDom.supportsViewTimeline() : motionDom.supportsScrollTimeline();
+}
+
 /**
  * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
  */
@@ -802,6 +808,18 @@ function resolveOffset(offset, containerLength, targetLength, targetInset) {
 }
 
 const ScrollOffset = {
+    Enter: [
+        [0, 1],
+        [1, 1],
+    ],
+    Exit: [
+        [0, 0],
+        [1, 0],
+    ],
+    Any: [
+        [1, 0],
+        [0, 1],
+    ],
     All: [
         [0, 0],
         [1, 1],
@@ -1011,8 +1029,41 @@ function scrollInfo(onScroll, { container = document.scrollingElement, trackCont
     };
 }
 
-function canUseNativeTimeline(target) {
-    return (typeof window !== "undefined" && !target && motionDom.supportsScrollTimeline());
+/**
+ * Maps from ProgressIntersection pairs used by Motion's preset offsets to
+ * ViewTimeline named ranges. Returns undefined for unrecognised patterns,
+ * which signals the caller to fall back to JS-based scroll tracking.
+ */
+const presets = [
+    [ScrollOffset.Enter, "entry"],
+    [ScrollOffset.Exit, "exit"],
+    [ScrollOffset.Any, "cover"],
+    [ScrollOffset.All, "contain"],
+];
+function matchesPreset(offset, preset) {
+    if (offset.length !== 2)
+        return false;
+    for (let i = 0; i < 2; i++) {
+        const o = offset[i];
+        const p = preset[i];
+        if (!Array.isArray(o) ||
+            o.length !== 2 ||
+            o[0] !== p[0] ||
+            o[1] !== p[1])
+            return false;
+    }
+    return true;
+}
+function offsetToViewTimelineRange(offset) {
+    if (!offset) {
+        return { rangeStart: "contain 0%", rangeEnd: "contain 100%" };
+    }
+    for (const [preset, name] of presets) {
+        if (matchesPreset(offset, preset)) {
+            return { rangeStart: `${name} 0%`, rangeEnd: `${name} 100%` };
+        }
+    }
+    return undefined;
 }
 
 const timelineCache = new Map();
@@ -1027,24 +1078,71 @@ function getTimeline({ source, container, ...options }) {
     const { axis } = options;
     if (source)
         container = source;
-    const containerCache = timelineCache.get(container) ?? new Map();
-    timelineCache.set(container, containerCache);
+    let containerCache = timelineCache.get(container);
+    if (!containerCache) {
+        containerCache = new Map();
+        timelineCache.set(container, containerCache);
+    }
     const targetKey = options.target ?? "self";
-    const targetCache = containerCache.get(targetKey) ?? {};
+    let targetCache = containerCache.get(targetKey);
+    if (!targetCache) {
+        targetCache = {};
+        containerCache.set(targetKey, targetCache);
+    }
     const axisKey = axis + (options.offset ?? []).join(",");
     if (!targetCache[axisKey]) {
-        targetCache[axisKey] =
-            canUseNativeTimeline(options.target)
-                ? new ScrollTimeline({ source: container, axis })
-                : scrollTimelineFallback({ container, ...options });
+        if (options.target && canUseNativeTimeline(options.target)) {
+            const range = offsetToViewTimelineRange(options.offset);
+            if (range) {
+                targetCache[axisKey] = new ViewTimeline({
+                    subject: options.target,
+                    axis,
+                });
+            }
+            else {
+                targetCache[axisKey] = scrollTimelineFallback({
+                    container,
+                    ...options,
+                });
+            }
+        }
+        else if (canUseNativeTimeline()) {
+            targetCache[axisKey] = new ScrollTimeline({
+                source: container,
+                axis,
+            });
+        }
+        else {
+            targetCache[axisKey] = scrollTimelineFallback({
+                container,
+                ...options,
+            });
+        }
     }
     return targetCache[axisKey];
 }
 
 function attachToAnimation(animation, options) {
     const timeline = getTimeline(options);
+    const range = options.target
+        ? offsetToViewTimelineRange(options.offset)
+        : undefined;
+    /**
+     * Use native timeline when:
+     * - No target: ScrollTimeline (existing behaviour)
+     * - Target with mappable offset: ViewTimeline with named range
+     * - Target with unmappable offset: fall back to JS observe
+     */
+    const useNative = options.target
+        ? canUseNativeTimeline(options.target) && !!range
+        : canUseNativeTimeline();
     return animation.attachTimeline({
-        timeline: options.target ? undefined : timeline,
+        timeline: useNative ? timeline : undefined,
+        ...(range &&
+            useNative && {
+            rangeStart: range.rangeStart,
+            rangeEnd: range.rangeEnd,
+        }),
         observe: (valueAnimation) => {
             valueAnimation.pause();
             return motionDom.observeTimeline((progress) => {