dotLottie Web Player Playback Control

The dotLottie Web Player provides comprehensive control over animation playback through a variety of methods and properties.

Basic Controls

CodePen↗

Play, Pause, and Stop

// Start or resume playback
dotLottie.play();

// Pause at current position
dotLottie.pause();

// Stop and return to first frame
dotLottie.stop();

Playback State

Check the current playback state:

// Check if animation is playing
console.log(dotLottie.isPlaying);

// Check if animation is paused
console.log(dotLottie.isPaused);

// Check if animation is stopped
console.log(dotLottie.isStopped);

Playback Configuration

Speed Control

// Set playback speed (1 is normal speed)
dotLottie.setSpeed(2); // Play at 2x speed

// Get current speed
console.log(dotLottie.speed);

Loop Control

// Enable/disable looping
dotLottie.setLoop(true);

// Check loop status
console.log(dotLottie.loop);

// Get loop count
console.log(dotLottie.loopCount);

Playback Mode

// Set playback mode
dotLottie.setMode("forward"); // Normal playback
dotLottie.setMode("reverse"); // Reverse playback
dotLottie.setMode("bounce"); // Play forward then reverse
dotLottie.setMode("bounce-reverse"); // Play reverse then forward

// Get current mode
console.log(dotLottie.mode);

Freeze/Unfreeze Control

Control the animation loop independently of playback state.

// Freeze the animation loop (pauses rendering updates)
dotLottie.freeze();

// Unfreeze the animation loop (resumes rendering updates)
dotLottie.unfreeze();

// Check if animation loop is frozen
console.log(dotLottie.isFrozen);

Frame Control

// Go to specific frame
dotLottie.setFrame(42);

// Get current frame
console.log(dotLottie.currentFrame);

// Get total frames
console.log(dotLottie.totalFrames);

Segment Playback

Play a specific range of frames:

// Play frames 10 through 50
dotLottie.setSegment(10, 50);

// Get current segment
console.log(dotLottie.segment); // Returns [startFrame, endFrame]

Markers

Play animation segments defined by markers:

// Play a specific marker segment
dotLottie.setMarker("intro");

// Get current marker
console.log(dotLottie.marker);

Event Handling

Monitor playback events:

// Playback events
dotLottie.addEventListener("play", () => {
  console.log("Animation started playing");
});

dotLottie.addEventListener("pause", () => {
  console.log("Animation paused");
});

dotLottie.addEventListener("stop", () => {
  console.log("Animation stopped");
});

dotLottie.addEventListener("complete", () => {
  console.log("Animation completed");
});

// Frame updates
dotLottie.addEventListener("frame", (frameNo) => {
  console.log("Current frame:", frameNo);
});

// Loop completion
dotLottie.addEventListener("loop", (loopCount) => {
  console.log("Loop completed:", loopCount);
});

// Listen for freeze/unfreeze events
dotLottie.addEventListener("freeze", () => {
  console.log("Animation frozen");
});
dotLottie.addEventListener("unfreeze", () => {
  console.log("Animation unfrozen");
});

Playback Information

Access playback-related properties:

// Get animation duration in milliseconds
console.log(dotLottie.duration);

// Get current direction (1 for forward, -1 for reverse)
console.log(dotLottie.direction);

Web Player Playback Control