@remotion/lottie 4.0.527 → 4.0.528

package/dist/cjs/Lottie.d.ts

@@ -1,6 +1,2 @@
 import type { LottieProps } from './types';
-/**
- * @description	Part of the @remotion/lottie package.
- * @see [Documentation](https://www.remotion.dev/docs/lottie/lottie)
- */
-export declare const Lottie: ({ animationData, className, direction, loop, playbackRate, style, onAnimationLoaded, renderer, preserveAspectRatio, assetsPath, }: LottieProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Lottie: ({ from, durationInFrames, trimBefore, freeze, hidden, name, showInTimeline, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, ...props }: LottieProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Lottie.js

@@ -15,7 +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 Lottie = ({ animationData, className, direction, loop, playbackRate, style, onAnimationLoaded, renderer, preserveAspectRatio, assetsPath, }) => {
+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.');
     }
@@ -125,4 +125,17 @@ const Lottie = ({ animationData, className, direction, loop, playbackRate, style
     }, [direction, frame, loop, playbackRate, 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 { 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,
+        premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+        postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+        style: style !== null && style !== void 0 ? style : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        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 }) }) }));
+};
 exports.Lottie = Lottie;

package/dist/cjs/types.d.ts

@@ -1,5 +1,6 @@
 import type { AnimationItem } from 'lottie-web';
 import type { CSSProperties } from 'react';
+import type { InteractiveBaseProps, InteractivePremountProps } from 'remotion';
 export type LottieAnimationData = {
     fr: number;
     w: number;
@@ -7,7 +8,7 @@ export type LottieAnimationData = {
     op: number;
 } & Record<string | number | symbol, unknown>;
 export type AspectRatioConstraint = 'none' | 'xMinYMin' | 'xMidYMin' | 'xMaxYMin' | 'xMinYMid' | 'xMidYMid' | 'xMaxYMid' | 'xMinYMax' | 'xMidYMax';
-export type LottieProps = {
+export type LottieProps = Omit<InteractiveBaseProps, 'playbackRate'> & InteractivePremountProps & {
     /**
      * JSON object with the animation data.
      * */

package/dist/esm/index.mjs

@@ -18,7 +18,13 @@ var getLottieMetadata = (animationData) => {
 // src/Lottie.tsx
 import lottie from "lottie-web";
 import { useEffect, useRef, useState } from "react";
-import { useCurrentFrame, useDelayRender } from "remotion";
+import {
+  Freeze,
+  Sequence,
+  Internals,
+  useCurrentFrame,
+  useDelayRender
+} from "remotion";
 
 // src/utils.ts
 var getLottieFrame = ({
@@ -62,7 +68,7 @@ var validatePlaybackRate = (playbackRate) => {
 
 // src/Lottie.tsx
 import { jsx } from "react/jsx-runtime";
-var Lottie = ({
+var LottieContent = ({
   animationData,
   className,
   direction,
@@ -179,6 +185,62 @@ var Lottie = ({
     style
   });
 };
+var Lottie = ({
+  from,
+  durationInFrames,
+  trimBefore,
+  freeze,
+  hidden,
+  name,
+  showInTimeline,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
+  style,
+  ...props
+}) => {
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive,
+    premountingStyle
+  } = Internals.usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx(Sequence, {
+      layout: "none",
+      from,
+      durationInFrames,
+      trimBefore,
+      freeze,
+      hidden,
+      name: name ?? "<Lottie>",
+      showInTimeline: showInTimeline ?? false,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx(LottieContent, {
+        ...props,
+        style: premountingStyle ?? undefined
+      })
+    })
+  });
+};
 export {
   getLottieMetadata,
   Lottie

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/lottie"
 	},
 	"name": "@remotion/lottie",
-	"version": "4.0.527",
+	"version": "4.0.528",
 	"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.527"
+		"remotion": "4.0.528"
 	},
 	"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.527",
+		"@remotion/eslint-config-internal": "4.0.528",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},