Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@lottiefiles/dotlottie-web

Package Overview
Dependencies
Maintainers
4
Versions
76
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lottiefiles/dotlottie-web - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

dist/chunk-STWLHF3O.js
dist/chunk-STWLHF3O.js.map
dist/chunk-YUMEQPLC.js
dist/chunk-YUMEQPLC.js.map

127

dist/dotlottie.d.ts

@@ -7,3 +7,11 @@ import { EventType, EventListener } from './event-manager.js';

type Mode = 'normal' | 'reverse' | 'bounce' | 'bounce-reverse';
type Mode = 'forward' | 'reverse' | 'bounce' | 'bounce-reverse';
interface RenderConfig {
/**
* The device pixel ratio to use when resizing the canvas.
*
* Default is window.devicePixelRatio or 1.
*/
devicePixelRatio?: number;
}
interface Config {

@@ -26,2 +34,4 @@ /**

* ArrayBuffer: The ArrayBuffer of the .lottie file.
*
* If the data is an ArrayBuffer, the JSON string will be extracted from the .lottie file.
*/

@@ -36,5 +46,23 @@ data?: string | ArrayBuffer;

*
* forward: The animation will play from start to end.
* reverse: The animation will play from end to start.
* bounce: The animation will play from start to end and then from end to start.
* bounce-reverse: The animation will play from end to start and then from start to end.
*
*/
mode?: Mode;
/**
* The render configuration.
*/
renderConfig?: RenderConfig;
/**
* The frame boundaries of the animation.
*
* The animation will only play between the given start and end frames.
*
* e.g. [0, 10] will play the first 10 frames of the animation only.
*
*/
segments?: [number, number];
/**
* The speed of the animation.

@@ -45,2 +73,4 @@ */

* The source URL of the animation.
*
* If the data is provided, the src will be ignored.
*/

@@ -54,3 +84,2 @@ src?: string;

private _renderer;
private _playing;
private _beginTime;

@@ -69,6 +98,20 @@ private _elapsedTime;

private _animationFrameId?;
private _shouldAutoResizeCanvas;
private readonly _canvasResizeObserver?;
private _segments;
private _playbackState;
private _backgroundColor;
private _renderConfig;
constructor(config: Config);
/**
* Gets the autoplay status of the animation.
*
* @returns The autoplay status of the animation.
*/
get autoplay(): boolean;
/**
* Gets the background color of the canvas.
*
* @returns The background color of the canvas.
*/
get backgroundColor(): string;
/**
* Gets the current direction of the animation.

@@ -116,7 +159,10 @@ *

/**
* Gets the playing status of the animation.
* Gets the segments of the animation if any are set.
* Default is 0 to total frames. but if segments are set, it will be the start and end frames.
*
* @returns The playing status of the animation.
*/
get playing(): boolean;
get segments(): [number, number] | null;
get isPlaying(): boolean;
get isPaused(): boolean;
get isStopped(): boolean;
/**

@@ -146,6 +192,10 @@ * Loads and initializes the animation from a given URL.

* Updates the current frame and animation state.
* @returns Boolean indicating if update was successful.
* @returns Boolean indicating if the frame was updated.
*/
private _update;
/**
* Handles the loop or completion logic for the animation.
*/
private _handleLoopOrCompletion;
/**
* Loop that handles the animation playback.

@@ -155,7 +205,2 @@ */

/**
* Adjusts the canvas size based on the device pixel ratio and the size of the canvas element.
*
*/
_resizeAnimationToCanvas(): void;
/**
* Stops the animation loop.

@@ -165,3 +210,3 @@ *

*/
_stopAnimationLoop(): void;
private _stopAnimationLoop;
/**

@@ -172,4 +217,23 @@ * Starts the animation loop.

*/
_startAnimationLoop(): void;
private _startAnimationLoop;
private _getEffectiveStartFrame;
private _getEffectiveEndFrame;
private _getEffectiveTotalFrames;
private _getEffectiveDuration;
/**
* Synchronizes the animation timing based on the current frame, direction, and speed settings.
* This method calculates the appropriate begin time for the animation loop, ensuring that the
* animation's playback is consistent with the specified parameters.
*
* @param frame - The current frame number from which the animation timing will be synchronized.
* This frame number is used to calculate the correct position in the animation timeline.
*
* Usage:
* - This function should be called whenever there is a change in the frame, speed, or direction
* of the animation to maintain the correct timing.
* - It is used internally in methods like `play`, `setFrame`, and `setMode` to ensure that the
* animation's playback remains smooth and accurate.
*/
private _synchronizeAnimationTiming;
/**
* Starts the animation playback.

@@ -201,3 +265,10 @@ */

setFrame(frame: number): void;
/**
*
* Sets the playback mode of the animation.
*
*/
setMode(mode: Mode): void;
load(config: Omit<Config, 'canvas'>): void;
setSegments(startFrame: number, endFrame: number): void;
/**

@@ -227,4 +298,30 @@ * Registers an event listener for a specific event type.

destroy(): void;
/**
* Freezes the animation by stopping the animation loop.
*
*/
freeze(): void;
/**
* Unfreezes the animation by resuming the animation loop.
*
*/
unfreeze(): void;
/**
* Sets the background color of the canvas.
*
* @param color - The background color of the canvas.
*/
setBackgroundColor(color: string): void;
/**
* Adjusts the canvas size to match the size of its bounding box, considering the device's pixel ratio.
* This method ensures that the canvas is correctly scaled for high-density displays, maintaining
* the clarity and quality of the rendered animation.
*
* Call this method whenever the size of the canvas element changes (e.g., due to window resizing,
* orientation changes, or dynamic layout updates) to ensure that the canvas is always properly scaled.
*
*/
resize(): void;
}
export { Config, DotLottie, Mode };

4

dist/dotlottie.js

@@ -1,3 +0,3 @@

export { b as DotLottie } from './chunk-4GVX2PO3.js';
import './chunk-2ELNS7EO.js';
export { b as DotLottie } from './chunk-YUMEQPLC.js';
import './chunk-STWLHF3O.js';
import './chunk-SMXCTWPA.js';

@@ -4,0 +4,0 @@ import './chunk-7Q3PPTBP.js';

9

dist/event-manager.d.ts

@@ -7,7 +7,7 @@ /**

*/
type EventType = 'complete' | 'frame' | 'load' | 'loadError' | 'loop' | 'pause' | 'play' | 'stop';
type EventType = 'complete' | 'frame' | 'load' | 'loadError' | 'loop' | 'pause' | 'play' | 'stop' | 'destroy';
/**
* Maps an event type string to its respective event interface.
*/
type EventByType<T> = T extends 'complete' ? CompleteEvent : T extends 'frame' ? FrameEvent : T extends 'load' ? LoadEvent : T extends 'loadError' ? LoadErrorEvent : T extends 'loop' ? LoopEvent : T extends 'pause' ? PauseEvent : T extends 'play' ? PlayEvent : T extends 'stop' ? StopEvent : never;
type EventByType<T> = T extends 'complete' ? CompleteEvent : T extends 'frame' ? FrameEvent : T extends 'load' ? LoadEvent : T extends 'loadError' ? LoadErrorEvent : T extends 'loop' ? LoopEvent : T extends 'pause' ? PauseEvent : T extends 'play' ? PlayEvent : T extends 'stop' ? StopEvent : T extends 'destroy' ? DestroyEvent : never;
/**

@@ -19,2 +19,5 @@ * Base interface for all events.

}
interface DestroyEvent extends BaseEvent {
type: 'destroy';
}
/**

@@ -92,2 +95,2 @@ * Event fired when a loop action occurs.

export { BaseEvent, CompleteEvent, Event, EventListener, EventManager, EventType, FrameEvent, LoadErrorEvent, LoadEvent, LoopEvent, PauseEvent, PlayEvent, StopEvent };
export { BaseEvent, CompleteEvent, DestroyEvent, Event, EventListener, EventManager, EventType, FrameEvent, LoadErrorEvent, LoadEvent, LoopEvent, PauseEvent, PlayEvent, StopEvent };

2

dist/event-manager.js

@@ -1,4 +0,4 @@

export { a as EventManager } from './chunk-2ELNS7EO.js';
export { a as EventManager } from './chunk-STWLHF3O.js';
import './chunk-7Q3PPTBP.js';
//# sourceMappingURL=out.js.map
//# sourceMappingURL=event-manager.js.map

2

dist/index.d.ts
export { Config, DotLottie, Mode } from './dotlottie.js';
export { BaseEvent, CompleteEvent, Event, EventListener, EventManager, EventType, FrameEvent, LoadErrorEvent, LoadEvent, LoopEvent, PauseEvent, PlayEvent, StopEvent } from './event-manager.js';
export { BaseEvent, CompleteEvent, DestroyEvent, Event, EventListener, EventManager, EventType, FrameEvent, LoadErrorEvent, LoadEvent, LoopEvent, PauseEvent, PlayEvent, StopEvent } from './event-manager.js';
export { debounce, getAnimationJSONFromDotLottie, loadAnimationJSONFromURL } from './utils.js';

@@ -4,0 +4,0 @@

4

dist/index.js

@@ -1,3 +0,3 @@

export { b as DotLottie, a as WasmLoader } from './chunk-4GVX2PO3.js';
export { a as EventManager } from './chunk-2ELNS7EO.js';
export { b as DotLottie, a as WasmLoader } from './chunk-YUMEQPLC.js';
export { a as EventManager } from './chunk-STWLHF3O.js';
export { c as debounce, a as getAnimationJSONFromDotLottie, b as loadAnimationJSONFromURL } from './chunk-SMXCTWPA.js';

@@ -4,0 +4,0 @@ import './chunk-7Q3PPTBP.js';

2

package.json
{
"name": "@lottiefiles/dotlottie-web",
"version": "0.7.0",
"version": "0.8.0",
"type": "module",

@@ -5,0 +5,0 @@ "description": "Lottie and DotLottie player for the web",

106

README.md

@@ -22,4 +22,3 @@ # @lottiefiles/dotlottie-web

* [Via CDN](#via-cdn)
* [Responsive Canvas](#responsive-canvas)
* [Live Example](#live-example)
* [Live Examples](#live-examples)
* [APIs](#apis)

@@ -106,33 +105,35 @@ * [Config](#config)

### Responsive Canvas
## Live Examples
`DotLottie` offers an automatic canvas resizing behavior to ensure optimal animation quality, especially when the canvas size changes dynamically, such as during browser window resizing or layout adjustments. This behavior is particularly useful when the canvas does not have fixed width and height attributes set, as it maintains the quality of the animation by adjusting the canvas's internal drawing buffer to match its display size.
* <a href="https://codesandbox.io/s/lottiefiles-dotlottie-web-basic-example-tcy3rv?autoresize=1&fontsize=14&hidenavigation=1&theme=dark" target="_blank">Basic Example</a>
* <a href="https://codesandbox.io/p/sandbox/lottiefiles-dotlottie-web-basic-example-forked-4v3t9y?autoresize=1&fontsize=14&hidenavigation=1&theme=dark" target="_blank">Controlling Animation Playback Example</a>
* <a href="https://codesandbox.io/s/lottiefiles-dotlottie-web-dynamic-animation-loading-example-q7dgvr?autoresize=1&fontsize=14&hidenavigation=1&theme=dark" target="_blank">Dynamic Animation Loading Example</a>
For this behavior to work correctly, the canvas element must be styled using CSS to take up 100% of the width of its parent container. Additionally, you can use the `aspect-ratio` property to maintain a specific aspect ratio for the canvas. Adjust this property as needed for your design requirements. For example:
## APIs
```html
<canvas id="canvas" style="width: 100%; aspect-ratio: 1"></canvas>
```
### Config
## Live Example
The `DotLottie` constructor accepts a config object with the following properties:
[![Edit @lottiefiles/dotlottie-web basic example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lottiefiles-dotlottie-web-basic-example-tcy3rv?autoresize=1\&fontsize=14\&hidenavigation=1\&theme=dark)
| Property name | Type | Required | Default | Description |
| ----------------- | --------------------- | :------: | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `autoplay` | boolean | | false | Auto-starts the animation on load. |
| `loop` | boolean | | false | Determines if the animation should loop. |
| `canvas` | HTMLCanvasElement | ✔️ | undefined | Canvas element for animation rendering. |
| `src` | string | | undefined | URL to the animation data (`.json` or `.lottie`). |
| `speed` | number | | 1 | Animation playback speed. 1 is regular speed. |
| `data` | string \| ArrayBuffer | | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. |
| `mode` | string | | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "bounce-reverse". |
| `backgroundColor` | string | | undefined | Background color of the canvas. e.g., "#000000", "rgba(0, 0, 0, 0.5)" or "transparent". |
| `segments` | \[number, number] | | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. |
| `renderConfig` | RenderConfig | | `{}` | Configuration for rendering the animation. |
## APIs
#### RenderConfig
### Config
The `renderConfig` object accepts the following properties:
The `DotLottie` constructor accepts a config object with the following properties:
| Property name | Type | Required | Default | Description |
| ------------------ | ------ | :------: | ----------------------------- | ----------------------- |
| `devicePixelRatio` | number | | window\.devicePixelRatio \| 1 | The device pixel ratio. |
| Property name | Type | Required | Default | Description |
| ----------------- | --------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------- |
| `autoplay` | boolean | | false | Auto-starts the animation on load. |
| `loop` | boolean | | false | Determines if the animation should loop. |
| `canvas` | HTMLCanvasElement | ✔️ | undefined | Canvas element for animation rendering. |
| `src` | string | | undefined | URL to the animation data (`.json` or `.lottie`). |
| `speed` | number | | 1 | Animation playback speed. 1 is regular speed. |
| `data` | string \| ArrayBuffer | | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. |
| `mode` | string | | "normal" | Animation play mode. Accepts "normal", "reverse", "bounce", "bounce-reverse". |
| `backgroundColor` | string | | undefined | Background color of the canvas. e.g., "#000000", "rgba(0, 0, 0, 0.5)" or "transparent". |
### Properties

@@ -142,12 +143,18 @@

| Property | Type | Description |
| -------------- | ------- | ------------------------------------------------------------------------------------------- |
| `currentFrame` | number | Represents the animation's currently displayed frame number. |
| `duration` | number | Specifies the animation's total playback time in milliseconds. |
| `totalFrames` | number | Denotes the total count of individual frames within the animation. |
| `loop` | boolean | Indicates if the animation is set to play in a continuous loop. |
| `speed` | number | Represents the playback speed factor; e.g., 2 would mean double speed. |
| `loopCount` | number | Tracks how many times the animation has completed its loop. |
| `playing` | boolean | Reflects whether the animation is in active playback or not |
| `direction` | string | Reflects the current playback direction; e.g., 1 would mean forward, -1 would mean reverse. |
| Property | Type | Description |
| ----------------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `currentFrame` | number | Represents the animation's currently displayed frame number. |
| `duration` | number | Specifies the animation's total playback time in milliseconds. |
| `totalFrames` | number | Denotes the total count of individual frames within the animation. |
| `loop` | boolean | Indicates if the animation is set to play in a continuous loop. |
| `speed` | number | Represents the playback speed factor; e.g., 2 would mean double speed. |
| `loopCount` | number | Tracks how many times the animation has completed its loop. |
| `direction` | string | Reflects the current playback direction; e.g., 1 would mean forward, -1 would mean reverse. |
| `mode` | string | Reflects the current playback mode. |
| `isPaused` | boolean | Reflects whether the animation is paused or not. |
| `isStopped` | boolean | Reflects whether the animation is stopped or not. |
| `isPlaying` | boolean | Reflects whether the animation is playing or not. |
| `segments` | number | Reflects the frames range of the animations. where segments\[0] is the start frame and segments\[1] is the end frame. |
| `backgroundColor` | string | Gets the background color of the canvas. |
| `autoplay` | boolean | Indicates if the animation is set to auto-play. |

@@ -158,14 +165,20 @@ ### Methods

| Method | Description |
| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `play()` | Begins playback from the current animation position. |
| `pause()` | Pauses the animation without resetting its position. |
| `stop()` | Halts playback and returns the animation to its initial frame. |
| `setSpeed(speed: number)` | Sets the playback speed with the given multiplier. |
| `setLoop(loop: boolean)` | Configures whether the animation should loop continuously. |
| `setFrame(frame: number)` | Directly navigates the animation to a specified frame. |
| `addEventListener(event: string, listener: Function)` | Registers a function to respond to a specific animation event. |
| `removeEventListener(event: string, listener?: Function)` | Removes a previously registered function from responding to a specific animation event. |
| `destroy()` | Destroys the renderer instance and unregisters all event listeners. This method should be called when the canvas is removed from the DOM to prevent memory leaks. |
| `load(config: Config)` | Loads a new configuration or a new animation. |
| Method | Description |
| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `play()` | Begins playback from the current animation position. |
| `pause()` | Pauses the animation without resetting its position. |
| `stop()` | Halts playback and returns the animation to its initial frame. |
| `setSpeed(speed: number)` | Sets the playback speed with the given multiplier. |
| `setLoop(loop: boolean)` | Configures whether the animation should loop continuously. |
| `setFrame(frame: number)` | Directly navigates the animation to a specified frame. |
| `addEventListener(event: string, listener: Function)` | Registers a function to respond to a specific animation event. |
| `removeEventListener(event: string, listener?: Function)` | Removes a previously registered function from responding to a specific animation event. |
| `destroy()` | Destroys the renderer instance and unregisters all event listeners. This method should be called when the canvas is removed from the DOM to prevent memory leaks. |
| `load(config: Config)` | Loads a new configuration or a new animation. |
| `setMode(mode: string)` | Sets the animation play mode. |
| `setSegments(startFrame: number, endFrame: number)` | Sets the start and end frame of the animation. |
| `freeze()` | Freezes the animation by stopping the animation loop. |
| `unfreeze()` | Unfreezes the animation by resuming the animation loop. |
| `setBackgroundColor(color: string)` | Sets the background color of the canvas. |
| `resize()` | This method adjusts the canvas size to match its bounding box dimensions, considering the device's pixel ratio. This prevents the canvas from appearing blurry on high-resolution screens. Call this method when the window or the canvas element is resized. |

@@ -194,2 +207,3 @@ ### Static Methods

| `frame` | Emitted when the animation reaches a new frame. |
| `destroy` | Emitted when the animation is destroyed. |

@@ -196,0 +210,0 @@ ## Development

dist/chunk-2ELNS7EO.js
dist/chunk-2ELNS7EO.js.map
dist/chunk-4GVX2PO3.js
dist/chunk-4GVX2PO3.js.map
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc