@lottiefiles/dotlottie-web - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

dist/dotlottie.d.ts

@@ -7,3 +7,4 @@ import { EventType, EventListener } from './event-manager.js';
 
-interface Options {
+type Mode = 'normal' | 'reverse' | 'bounce' | 'bounce-reverse';
+interface Config {
     /**
@@ -28,2 +29,7 @@ * Boolean indicating if the animation should start playing automatically.
     /**
+     *  The playback mode of the animation.
+     *
+     */
+    mode?: Mode;
+    /**
      * The speed of the animation.
@@ -51,4 +57,16 @@ */
     private _autoplay;
-    constructor(config: Options);
+    private _mode;
+    private _direction;
+    private _bounceCount;
+    private _animationFrameId?;
+    private _shouldAutoResizeCanvas;
+    private readonly _canvasResizeObserver?;
+    constructor(config: Config);
     /**
+     * Gets the current direction of the animation.
+     *
+     * @returns The current direction of the animation.
+     */
+    get direction(): number;
+    /**
      * Gets the current frame number.
@@ -127,2 +145,19 @@ *
     /**
+     * Adjusts the canvas size based on the device pixel ratio and the size of the canvas element.
+     *
+     */
+    _resizeAnimationToCanvas(): void;
+    /**
+     * Stops the animation loop.
+     *
+     * This is used to ensure that the animation loop is only stopped once.
+     */
+    _stopAnimationLoop(): void;
+    /**
+     * Starts the animation loop.
+     *
+     * This is used to ensure that the animation loop is only started once.
+     */
+    _startAnimationLoop(): void;
+    /**
      * Starts the animation playback.
@@ -154,2 +189,3 @@ */
     setFrame(frame: number): void;
+    load(config: Omit<Config, 'canvas'>): void;
     /**
@@ -181,2 +217,2 @@ * Registers an event listener for a specific event type.
 
-export { DotLottie, Options };
+export { Config, DotLottie, Mode };

dist/dotlottie.js

@@ -1,6 +0,6 @@
-export { b as DotLottie } from './chunk-LVR6J6SH.js';
+export { b as DotLottie } from './chunk-NIBIKWSN.js';
 import './chunk-2ELNS7EO.js';
-import './chunk-6PRCY2FC.js';
+import './chunk-SMXCTWPA.js';
 import './chunk-7Q3PPTBP.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=dotlottie.js.map

dist/index.d.ts

@@ -1,4 +0,4 @@
-export { DotLottie, Options } from './dotlottie.js';
+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 { getAnimationJSONFromDotLottie, loadAnimationJSONFromURL } from './utils.js';
+export { debounce, getAnimationJSONFromDotLottie, loadAnimationJSONFromURL } from './utils.js';
 
@@ -5,0 +5,0 @@ /**

dist/index.js

@@ -1,6 +0,6 @@
-export { b as DotLottie, a as WasmLoader } from './chunk-LVR6J6SH.js';
+export { b as DotLottie, a as WasmLoader } from './chunk-NIBIKWSN.js';
 export { a as EventManager } from './chunk-2ELNS7EO.js';
-export { a as getAnimationJSONFromDotLottie, b as loadAnimationJSONFromURL } from './chunk-6PRCY2FC.js';
+export { c as debounce, a as getAnimationJSONFromDotLottie, b as loadAnimationJSONFromURL } from './chunk-SMXCTWPA.js';
 import './chunk-7Q3PPTBP.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

dist/utils.d.ts

@@ -6,3 +6,4 @@ /**
 declare function loadAnimationJSONFromURL(animationURL: string): Promise<string>;
+declare function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...funcArgs: Parameters<T>) => void;
 
-export { getAnimationJSONFromDotLottie, loadAnimationJSONFromURL };
+export { debounce, getAnimationJSONFromDotLottie, loadAnimationJSONFromURL };

dist/utils.js

@@ -1,4 +0,4 @@
-export { a as getAnimationJSONFromDotLottie, b as loadAnimationJSONFromURL } from './chunk-6PRCY2FC.js';
+export { c as debounce, a as getAnimationJSONFromDotLottie, b as loadAnimationJSONFromURL } from './chunk-SMXCTWPA.js';
 import './chunk-7Q3PPTBP.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "@lottiefiles/dotlottie-web",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
@@ -40,6 +40,3 @@ "description": "Lottie and DotLottie player for the web",
   "devDependencies": {
-    "@size-limit/esbuild-why": "^10.0.2",
-    "@size-limit/preset-small-lib": "^10.0.2",
     "cross-env": "7.0.3",
-    "size-limit": "^10.0.2",
     "tsup": "7.2.0",
@@ -57,3 +54,2 @@ "typescript": "5.0.4"
     "lint": "eslint --fix .",
-    "size": "size-limit",
     "size:why": "size-limit --why --clean-dir --save-bundle ./tmp",
@@ -60,0 +56,0 @@ "stats:eslint": "cross-env TIMING=1 eslint .",

README.md

@@ -24,3 +24,3 @@ # @lottiefiles/dotlottie-web
 * [APIs](#apis)
-  * [Options](#options)
+  * [Config](#config)
   * [Properties](#properties)
@@ -111,27 +111,35 @@ * [Methods](#methods)
 
-### Options
+### Config
 
-| Option     | 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. |
+The `DotLottie` constructor accepts a config object with the following properties:
 
+| 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".                       |
+
 ### Properties
 
-| 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            |
+`DotLottie` instances expose the following properties:
 
+| 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. |
+
 ### Methods
 
+`DotLottie` instances expose the following methods that can be used to control the animation:
+
 | Method                                                    | Description                                                                                                                                                       |
@@ -148,5 +156,8 @@ | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `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.                                                                                                                     |
 
 ### Static Methods
 
+The `DotLottie` class exposes the following static methods:
+
 | Method                    | Description                               |
@@ -158,2 +169,4 @@ | ------------------------- | ----------------------------------------- |
 
+The `DotLottie` instance emits the following events that can be listened to via the `addEventListener` method:
+
 | Event       | Description                                          |
@@ -160,0 +173,0 @@ | ----------- | ---------------------------------------------------- |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

3

decreased by-50%

Lines of code

608

increased by5.01%

Number of lines in readme file

216

increased by6.4%

Worsened metrics

Total package byte prevSize

827974

decreased by-16.41%

No dependency changes