diff --git a/src/hooks/useLottieInteractivity.tsx b/src/hooks/useLottieInteractivity.tsx index b2cf3ad..83ec943 100644 --- a/src/hooks/useLottieInteractivity.tsx +++ b/src/hooks/useLottieInteractivity.tsx @@ -39,6 +39,7 @@ export const useInitInteractivity = ({ }: InitInteractivity) => { useEffect(() => { const wrapper = wrapperRef.current; + let playCount = 0; if (!wrapper || !animationItem || !actions.length) { return; @@ -117,6 +118,12 @@ export const useInitInteractivity = ({ animationItem.resetSegments(true); animationItem.play(); } + if (action.type === "playOnce" && playCount === 0) { + // Play: Reset segments and continue playing full animation from current position + animationItem.resetSegments(true); + animationItem.play(); + playCount++; + } if (action.type === "stop") { // Stop: Stop playback @@ -218,6 +225,14 @@ export const useInitInteractivity = ({ animationItem.playSegments(action.frames as AnimationSegment); } + if (action.type === "playOnce" && playCount === 0) { + if (animationItem.isPaused) { + animationItem.resetSegments(false); + } + animationItem.playSegments(action.frames as AnimationSegment); + playCount++; + } + if (action.type === "stop") { animationItem.goToAndStop(action.frames[0], true); } diff --git a/src/types.ts b/src/types.ts index 2e8edc7..39dfc7e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -62,7 +62,7 @@ export type Axis = "x" | "y"; export type Position = { [key in Axis]: number | [number, number] }; export type Action = { - type: "seek" | "play" | "stop" | "loop"; + type: "seek" | "play" | "stop" | "loop" | "playOnce"; frames: [number] | [number, number]; visibility?: [number, number]; position?: Position;