@remotion/lottie 3.2.2 → 3.2.3

package/dist/Lottie.d.ts

@@ -1,25 +1,2 @@
-import type { CSSProperties } from 'react';
-import type { LottieAnimationData } from './types';
-export interface LottieProps {
-    /**
-     * JSON object with the animation data.
-     * */
-    animationData: LottieAnimationData;
-    /**
-     * If the animation should loop after its end.
-     */
-    loop?: boolean;
-    /**
-     * The speed of the animation. Defaults to 1.
-     */
-    playbackRate?: number;
-    /**
-     * CSS classes to apply on the container of the animation.
-     */
-    className?: string;
-    /**
-     * CSS properties to apply on the container of the animation.
-     */
-    style?: CSSProperties;
-}
-export declare const Lottie: ({ animationData, className, loop, playbackRate, style, }: LottieProps) => JSX.Element;
+import type { LottieProps } from './types';
+export declare const Lottie: ({ animationData, className, direction, loop, playbackRate, style, }: LottieProps) => JSX.Element;

package/dist/Lottie.js

@@ -11,7 +11,7 @@ const remotion_1 = require("remotion");
 const utils_1 = require("./utils");
 const validate_loop_1 = require("./validate-loop");
 const validate_playbackrate_1 = require("./validate-playbackrate");
-const Lottie = ({ animationData, className, loop, playbackRate, style, }) => {
+const Lottie = ({ animationData, className, direction, loop, playbackRate, style, }) => {
     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.');
     }
@@ -46,20 +46,28 @@ const Lottie = ({ animationData, className, loop, playbackRate, style, }) => {
         };
     }, [animationData, handle]);
     (0, react_1.useEffect)(() => {
-        if (!animationRef.current) {
-            return;
+        if (animationRef.current && direction) {
+            animationRef.current.setDirection(direction === 'backward' ? -1 : 1);
+        }
+    }, [direction]);
+    (0, react_1.useEffect)(() => {
+        if (animationRef.current && playbackRate) {
+            animationRef.current.setSpeed(playbackRate);
         }
-        animationRef.current.setSpeed(playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1);
     }, [playbackRate]);
     (0, react_1.useEffect)(() => {
         if (!animationRef.current) {
             return;
         }
         const { totalFrames } = animationRef.current;
-        const expectedFrame = frame * (playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1);
-        const nextFrame = (0, utils_1.getNextFrame)(expectedFrame, totalFrames, loop);
+        const nextFrame = (0, utils_1.getNextFrame)({
+            currentFrame: frame * (playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1),
+            direction,
+            loop,
+            totalFrames,
+        });
         animationRef.current.goToAndStop(nextFrame, true);
-    }, [frame, loop, playbackRate]);
+    }, [direction, frame, loop, playbackRate]);
     return (0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: className, style: style });
 };
 exports.Lottie = Lottie;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export { getLottieMetadata } from './get-lottie-metadata';
 export { Lottie } from './Lottie';
-export type { LottieProps } from './Lottie';
-export type { LottieAnimationData } from './types';
+export type { LottieAnimationData, LottieProps } from './types';

package/dist/test/utils.test.js

@@ -5,18 +5,44 @@ const utils_1 = require("../utils");
 (0, vitest_1.describe)('getNextFrame', () => {
     (0, vitest_1.describe)('when loop is falsy', () => {
         (0, vitest_1.it)('returns the current frame if smaller than total frames', () => {
-            (0, vitest_1.expect)((0, utils_1.getNextFrame)(23, 56)).toBe(23);
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)({ currentFrame: 23, totalFrames: 56 })).toBe(23);
         });
         (0, vitest_1.it)('returns the last frame if current frame is bigger than total frames', () => {
-            (0, vitest_1.expect)((0, utils_1.getNextFrame)(23, 20)).toBe(20);
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)({ currentFrame: 23, totalFrames: 20 })).toBe(20);
         });
     });
     (0, vitest_1.describe)('when loop is truthy', () => {
         (0, vitest_1.it)('returns the current frame if smaller than total frames', () => {
-            (0, vitest_1.expect)((0, utils_1.getNextFrame)(23, 56, true)).toBe(23);
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)({ currentFrame: 23, totalFrames: 56, loop: true })).toBe(23);
         });
-        (0, vitest_1.it)('returns the last frame if current frame is bigger than total frames', () => {
-            (0, vitest_1.expect)((0, utils_1.getNextFrame)(23, 20, true)).toBe(3);
+        (0, vitest_1.it)('returns the modulo if current frame is bigger than total frames', () => {
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)({ currentFrame: 23, totalFrames: 20, loop: true })).toBe(3);
+        });
+    });
+    (0, vitest_1.describe)('when direction is reverse and loop is falsy', () => {
+        (0, vitest_1.it)('returns the correct frame if current frame is smaller than total frames', () => {
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)({ currentFrame: 15, totalFrames: 20, direction: 'backward' })).toBe(5);
+        });
+        (0, vitest_1.it)('returns frame zero if current frame is bigger than total frames', () => {
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)({ currentFrame: 23, totalFrames: 20, direction: 'backward' })).toBe(0);
+        });
+    });
+    (0, vitest_1.describe)('when direction is reverse and loop is truthy', () => {
+        (0, vitest_1.it)('returns the correct frame if current frame is smaller than total frames', () => {
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)({
+                currentFrame: 15,
+                totalFrames: 20,
+                direction: 'backward',
+                loop: true,
+            })).toBe(5);
+        });
+        (0, vitest_1.it)('returns (total-overflow) if current frame is bigger than total frames', () => {
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)({
+                currentFrame: 23,
+                totalFrames: 20,
+                direction: 'backward',
+                loop: true,
+            })).toBe(17);
         });
     });
 });

package/dist/types.d.ts

@@ -1,6 +1,33 @@
+import type { CSSProperties } from 'react';
 export declare type LottieAnimationData = {
     fr: number;
     w: number;
     h: number;
     op: number;
 } & Record<string | number | symbol, unknown>;
+export declare type LottieProps = {
+    /**
+     * JSON object with the animation data.
+     * */
+    animationData: LottieAnimationData;
+    /**
+     * CSS classes to apply on the container of the animation.
+     */
+    className?: string;
+    /**
+     * The direction of the animation. Defaults to forward.
+     */
+    direction?: 'forward' | 'backward';
+    /**
+     * If the animation should loop after its end.
+     */
+    loop?: boolean;
+    /**
+     * The speed of the animation. Defaults to 1.
+     */
+    playbackRate?: number;
+    /**
+     * CSS properties to apply to the container of the animation.
+     */
+    style?: CSSProperties;
+};

package/dist/utils.d.ts

@@ -1 +1,7 @@
-export declare const getNextFrame: (currentFrame: number, totalFrames: number, loop?: boolean) => number;
+import type { LottieProps } from './types';
+declare type Params = Pick<LottieProps, 'direction' | 'loop'> & {
+    currentFrame: number;
+    totalFrames: number;
+};
+export declare const getNextFrame: ({ currentFrame, direction, loop, totalFrames, }: Params) => number;
+export {};

package/dist/utils.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNextFrame = void 0;
-const getNextFrame = (currentFrame, totalFrames, loop) => {
-    return loop
+const getNextFrame = ({ currentFrame, direction, loop, totalFrames, }) => {
+    const nextFrame = loop
         ? currentFrame % totalFrames
         : Math.min(currentFrame, totalFrames);
+    if (direction === 'backward') {
+        return totalFrames - nextFrame;
+    }
+    return nextFrame;
 };
 exports.getNextFrame = getNextFrame;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/lottie",
-	"version": "3.2.2",
+	"version": "3.2.3",
 	"description": "Remotion Lottie",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -27,7 +27,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.2.2"
+		"remotion": "3.2.3"
 	},
 	"peerDependencies": {
 		"lottie-web": "^5",
@@ -58,5 +58,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8e5f2d05adf7ddd3824ea734fa888b4b4761f364"
+	"gitHead": "15773a2e48ee8a9dbcfd898520cb914396c21eb1"
 }