@remotion/lottie 4.0.529 → 4.0.531

package/dist/cjs/Lottie.d.ts

@@ -1,2 +1,2 @@
 import type { LottieProps } from './types';
-export declare const Lottie: ({ from, durationInFrames, trimBefore, freeze, hidden, name, showInTimeline, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, ...props }: LottieProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Lottie: ({ animationData, from, durationInFrames, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, ...props }: LottieProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Lottie.js

@@ -15,12 +15,7 @@ const validate_playbackrate_1 = require("./validate-playbackrate");
  * @description	Part of the @remotion/lottie package.
  * @see [Documentation](https://www.remotion.dev/docs/lottie/lottie)
  */
-const LottieContent = ({ animationData, className, direction, loop, playbackRate, style, onAnimationLoaded, renderer, preserveAspectRatio, assetsPath, }) => {
-    if (typeof animationData !== 'object') {
-        throw new Error('animationData should be provided as an object. If you only have the path to the JSON file, load it and pass it as animationData. See https://remotion.dev/docs/lottie/lottie#example for more information.');
-    }
-    (0, validate_playbackrate_1.validatePlaybackRate)(playbackRate);
-    (0, validate_loop_1.validateLoop)(loop);
+const LottieContent = ({ animationData, className, direction, style, onAnimationLoaded, renderer, preserveAspectRatio, assetsPath, }) => {
     const animationRef = (0, react_1.useRef)(null);
     const currentFrameRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
@@ -59,9 +54,8 @@ const LottieContent = ({ animationData, className, direction, loop, playbackRate
             // We can work around it by seeking twice, initially.
             if (currentFrameRef.current) {
                 const frameToSet = (0, utils_1.getLottieFrame)({
-                    currentFrame: currentFrameRef.current * (playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1),
+                    currentFrame: currentFrameRef.current,
                     direction,
-                    loop,
                     totalFrames: animation.totalFrames,
                 });
                 (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(Math.max(0, frameToSet - 1), true);
@@ -80,8 +74,6 @@ const LottieContent = ({ animationData, className, direction, loop, playbackRate
         assetsPath,
         direction,
         handle,
-        loop,
-        playbackRate,
         preserveAspectRatio,
         renderer,
         continueRender,
@@ -91,11 +83,6 @@ const LottieContent = ({ animationData, className, direction, loop, playbackRate
             animationRef.current.setDirection(direction === 'backward' ? -1 : 1);
         }
     }, [direction]);
-    (0, react_1.useEffect)(() => {
-        if (animationRef.current && playbackRate) {
-            animationRef.current.setSpeed(playbackRate);
-        }
-    }, [playbackRate]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!animationRef.current) {
@@ -103,9 +90,8 @@ const LottieContent = ({ animationData, className, direction, loop, playbackRate
         }
         const { totalFrames } = animationRef.current;
         const frameToSet = (0, utils_1.getLottieFrame)({
-            currentFrame: frame * (playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1),
+            currentFrame: frame,
             direction,
-            loop,
             totalFrames,
         });
         animationRef.current.goToAndStop(frameToSet, true);
@@ -122,13 +108,27 @@ const LottieContent = ({ animationData, className, direction, loop, playbackRate
             }, { once: true });
             img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', img.href.baseVal);
         });
-    }, [direction, frame, loop, playbackRate, delayRender, continueRender]);
+    }, [direction, frame, delayRender, continueRender]);
     return jsx_runtime_1.jsx("div", { ref: containerRef, className: className, style: style });
 };
-const Lottie = ({ from, durationInFrames, trimBefore, freeze, hidden, name, showInTimeline, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, ...props }) => {
+const Lottie = ({ animationData, from, durationInFrames, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, ...props }) => {
+    if (typeof animationData !== 'object' || animationData === null) {
+        throw new Error('animationData should be provided as an object. If you only have the path to the JSON file, load it and pass it as animationData. See https://remotion.dev/docs/lottie/lottie#example for more information.');
+    }
+    (0, validate_playbackrate_1.validatePlaybackRate)(playbackRate);
+    (0, validate_loop_1.validateLoop)(loop);
+    // Match lottie-web's totalFrames so an implicit loop ends at the asset boundary.
+    const sequenceDurationInFrames = loop && durationInFrames === undefined
+        ? Math.floor(animationData.op -
+            (typeof animationData.ip === 'number' ? animationData.ip : 0)) - (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0)
+        : durationInFrames;
     const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = remotion_1.Internals.usePremounting({
         from: from !== null && from !== void 0 ? from : 0,
-        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        durationInFrames: remotion_1.Internals.resolveSequenceDuration({
+            durationInFrames: sequenceDurationInFrames,
+            playbackRate,
+            loop,
+        }),
         premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
         postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
         style: style !== null && style !== void 0 ? style : null,
@@ -136,6 +136,6 @@ const Lottie = ({ from, durationInFrames, trimBefore, freeze, hidden, name, show
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'opacity',
     });
-    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, durationInFrames: durationInFrames, trimBefore: trimBefore, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Lottie>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : false, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(LottieContent, { ...props, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined }) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, durationInFrames: sequenceDurationInFrames, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Lottie>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : false, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(LottieContent, { ...props, animationData: animationData, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined }) }) }));
 };
 exports.Lottie = Lottie;

package/dist/esm/index.mjs

@@ -72,19 +72,12 @@ var LottieContent = ({
   animationData,
   className,
   direction,
-  loop,
-  playbackRate,
   style,
   onAnimationLoaded,
   renderer,
   preserveAspectRatio,
   assetsPath
 }) => {
-  if (typeof animationData !== "object") {
-    throw new Error("animationData should be provided as an object. If you only have the path to the JSON file, load it and pass it as animationData. See https://remotion.dev/docs/lottie/lottie#example for more information.");
-  }
-  validatePlaybackRate(playbackRate);
-  validateLoop(loop);
   const animationRef = useRef(null);
   const currentFrameRef = useRef(null);
   const containerRef = useRef(null);
@@ -117,9 +110,8 @@ var LottieContent = ({
     const onComplete = () => {
       if (currentFrameRef.current) {
         const frameToSet = getLottieFrame({
-          currentFrame: currentFrameRef.current * (playbackRate ?? 1),
+          currentFrame: currentFrameRef.current,
           direction,
-          loop,
           totalFrames: animation.totalFrames
         });
         animationRef.current?.goToAndStop(Math.max(0, frameToSet - 1), true);
@@ -138,8 +130,6 @@ var LottieContent = ({
     assetsPath,
     direction,
     handle,
-    loop,
-    playbackRate,
     preserveAspectRatio,
     renderer,
     continueRender
@@ -149,20 +139,14 @@ var LottieContent = ({
       animationRef.current.setDirection(direction === "backward" ? -1 : 1);
     }
   }, [direction]);
-  useEffect(() => {
-    if (animationRef.current && playbackRate) {
-      animationRef.current.setSpeed(playbackRate);
-    }
-  }, [playbackRate]);
   useEffect(() => {
     if (!animationRef.current) {
       return;
     }
     const { totalFrames } = animationRef.current;
     const frameToSet = getLottieFrame({
-      currentFrame: frame * (playbackRate ?? 1),
+      currentFrame: frame,
       direction,
-      loop,
       totalFrames
     });
     animationRef.current.goToAndStop(frameToSet, true);
@@ -178,7 +162,7 @@ var LottieContent = ({
       }, { once: true });
       img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", img.href.baseVal);
     });
-  }, [direction, frame, loop, playbackRate, delayRender, continueRender]);
+  }, [direction, frame, delayRender, continueRender]);
   return /* @__PURE__ */ jsx("div", {
     ref: containerRef,
     className,
@@ -186,9 +170,12 @@ var LottieContent = ({
   });
 };
 var Lottie = ({
+  animationData,
   from,
   durationInFrames,
   trimBefore,
+  playbackRate,
+  loop,
   freeze,
   hidden,
   name,
@@ -200,6 +187,12 @@ var Lottie = ({
   style,
   ...props
 }) => {
+  if (typeof animationData !== "object" || animationData === null) {
+    throw new Error("animationData should be provided as an object. If you only have the path to the JSON file, load it and pass it as animationData. See https://remotion.dev/docs/lottie/lottie#example for more information.");
+  }
+  validatePlaybackRate(playbackRate);
+  validateLoop(loop);
+  const sequenceDurationInFrames = loop && durationInFrames === undefined ? Math.floor(animationData.op - (typeof animationData.ip === "number" ? animationData.ip : 0)) - (trimBefore ?? 0) : durationInFrames;
   const {
     effectivePremountFor,
     effectivePostmountFor,
@@ -210,7 +203,11 @@ var Lottie = ({
     premountingStyle
   } = Internals.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals.resolveSequenceDuration({
+      durationInFrames: sequenceDurationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: style ?? null,
@@ -224,8 +221,10 @@ var Lottie = ({
     children: /* @__PURE__ */ jsx(Sequence, {
       layout: "none",
       from,
-      durationInFrames,
+      durationInFrames: sequenceDurationInFrames,
       trimBefore,
+      playbackRate,
+      loop,
       freeze,
       hidden,
       name: name ?? "<Lottie>",
@@ -236,6 +235,7 @@ var Lottie = ({
       _remotionInternalIsPostmounting: postmountingActive,
       children: /* @__PURE__ */ jsx(LottieContent, {
         ...props,
+        animationData,
         style: premountingStyle ?? undefined
       })
     })

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/lottie"
 	},
 	"name": "@remotion/lottie",
-	"version": "4.0.529",
+	"version": "4.0.531",
 	"description": "Include Lottie animations in Remotion",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -25,7 +25,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.529"
+		"remotion": "4.0.531"
 	},
 	"peerDependencies": {
 		"lottie-web": "^5",
@@ -45,7 +45,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"lottie-web": "5.13.0",
-		"@remotion/eslint-config-internal": "4.0.529",
+		"@remotion/eslint-config-internal": "4.0.531",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},