<div class="container">
<h1>dotLottie Web - playback controls example</h1>
<div style="display: flex; flex-direction: column;">
<a href="https://github.com/lottiefiles/dotlottie-web" target="_blank">
<canvas style="max-width: 500px; margin: auto"></canvas>
</a>
<a href="https://lottiefiles.com/animations/celebration-lolo-w318l83FuX" target="_blank">Lolo Sticker - Celebration Lolo</a>
</div>
<div class="controls">
<div>
<button id="play-btn">Play</button>
<button id="pause-btn">Pause</button>
<button id="stop-btn">Stop</button>
<button id="loop-btn">Disable Loop</button>
</div>
<div>
<button id="freeze-btn">Freeze</button>
<button id="unfreeze-btn">UnFreeze</button>
</div>
<div>
<button id="destroy-btn" style="background-color:red;">Destroy</button>
</div>
<div class="dropdown-container">
<label for="mode-dropdown">Mode:</label>
<select id="mode-dropdown">
<option value="forward">Forward</option>
<option value="reverse">Reverse</option>
<option value="bounce">Bounce</option>
<option value="bounce-reverse">Bounce Reverse</option>
</select>
</div>
<div class="slider-container">
<label for="speed-slider">Speed:</label>
<input type="range" id="speed-slider" min="0.5" max="5" step="0.1" value="1" />
</div>
<div class="slider-container">
<label for="frame-slider">Frame:</label>
<input type="range" id="frame-slider" min="0" max="100" step="1" value="0" />
</div>
<div class="segment-container">
<label for="segment-start">Segments(Start Frame):</label>
<input type="number" id="segment-start" min="0" value="0" />
<br>
<label for="segment-end">Segments(End Frame):</label>
<input type="number" id="segment-end" min="0" value="100" />
<br>
<button id="set-segment-btn">Set Segments</button>
</div>
<div class="playback-state">
Playback State: <span id="playback-state">Stopped</span>
</div>
</div>
</div>
<div class="event-log-container">
<h3>Event Log</h3>
<ul id="event-list"></ul>
</div>
<svg id="LottieFilesLogo" xmlns="http://www.w3.org/2000/svg" width="401" height="79" viewBox="0 0 401 79" fill="none">
<g clip-path="url(#clip0_274_2135)">
<path d="M313.847 28.1592H304.374V61.5326H313.847V28.1592Z" fill="black" />
<path d="M313.847 17.1592H304.374V24.5385H313.847V17.1592Z" fill="black" />
<path d="M107.249 17.1592H97.3477V61.5318H127.583V53.0246H107.249V17.1592Z" fill="black" />
<path d="M147.151 25.3818C136.612 25.3818 128.27 33.5345 128.27 43.8086C128.27 54.0828 136.612 62.2569 147.151 62.2569C157.691 62.2569 166.103 54.1042 166.103 43.8247C166.103 33.5453 157.755 25.3818 147.151 25.3818ZM147.151 53.449C141.847 53.449 137.887 49.4102 137.887 43.7818C137.887 38.1533 141.847 34.1468 147.151 34.1468C152.456 34.1468 156.416 38.2553 156.416 43.7818C156.416 49.3082 152.456 53.449 147.151 53.449Z" fill="black" />
<path d="M205.834 54.0178C204.135 54.0178 202.651 53.0242 202.651 49.979V35.8058H211.685V28.158H202.651V18.5391H193.178V28.158H180.737V18.5391H171.263V28.158H166.104V35.8058H171.263V50.1187C171.263 58.1264 175.084 62.2403 182.151 62.2403C185.342 62.2466 188.465 61.3128 191.131 59.555L188.452 52.5408C187.111 53.4498 185.542 53.9651 183.924 54.0285C182.226 54.0285 180.742 53.0349 180.742 49.9898V35.8058H193.183V50.1187C193.183 58.1264 196.998 62.2403 204.071 62.2403C207.262 62.2456 210.385 61.3119 213.051 59.555L210.372 52.5408C209.027 53.4492 207.455 53.9609 205.834 54.0178Z" fill="black" />
<path d="M265.726 41.3117C264.28 31.3491 255.616 24.3028 246.094 25.6938C243.7 26.0214 241.395 26.825 239.314 28.0574C237.234 29.2898 235.419 30.9261 233.978 32.8705C232.537 34.8149 231.497 37.0282 230.921 39.3806C230.344 41.733 230.242 44.1771 230.62 46.5696C232.297 58.1434 242.226 63.5034 252.438 62.0103C257.063 61.3586 261.396 59.3584 264.896 56.2583L260.416 50.0337C257.859 52.2489 254.719 53.6774 251.372 54.1477C246.753 54.819 242.429 53.0735 240.607 48.4118L266.005 44.706C265.975 43.5703 265.882 42.4371 265.726 41.3117ZM239.557 42.1872C239.825 37.6382 242.901 34.1795 246.957 33.5941C249.018 33.2728 251.125 33.7157 252.883 34.8398C254.642 35.9639 255.932 37.692 256.51 39.7005L239.557 42.1872Z" fill="black" />
<path d="M368.564 41.3117C367.117 31.3491 358.448 24.3028 348.932 25.6938C346.537 26.0207 344.232 26.8239 342.151 28.056C340.07 29.2882 338.256 30.9246 336.814 32.8692C335.373 34.8137 334.333 37.0273 333.757 39.38C333.181 41.7327 333.079 44.177 333.458 46.5696C335.135 58.1434 345.058 63.5034 355.276 62.0103C359.9 61.3585 364.23 59.3582 367.728 56.2583L363.254 50.0337C360.695 52.2491 357.553 53.6775 354.204 54.1477C349.586 54.819 345.262 53.0735 343.44 48.4118L368.843 44.706C368.809 43.5705 368.716 42.4375 368.564 41.3117ZM342.395 42.1872C342.663 37.6382 345.733 34.1795 349.795 33.5941C351.853 33.2713 353.958 33.714 355.714 34.8387C357.47 35.9633 358.754 37.6924 359.327 39.7005L342.395 42.1872Z" fill="black" />
<path d="M329.402 17.1592H319.929V61.5264H329.402V17.1592Z" fill="black" />
<path d="M388.181 39.3456C384.929 38.6367 381.96 37.9975 381.96 36.0158C381.96 34.5281 384.012 33.5345 386.204 33.5345C389.626 33.5889 392.99 34.4383 396.03 36.0158L399.213 28.9264C395.259 26.5022 390.692 25.2716 386.059 25.3818C379.415 25.3818 372.342 29.2111 372.342 36.44C372.342 43.2447 378.07 45.5702 385.073 47.4231C388.111 48.277 391.155 48.7711 391.155 50.8979C391.155 53.0247 387.549 53.8733 385.352 53.8733C381.351 53.9514 377.449 52.6211 374.325 50.1138L370.928 57.4233C372.91 59.2654 377.786 62.2569 385.352 62.2569C391.931 62.2569 400.767 59.3513 400.767 50.6294C400.767 43.3843 394.214 40.7742 388.181 39.3456Z" fill="black" />
<path d="M226.334 28.1592H216.86V61.5326H226.334V28.1592Z" fill="black" />
<path d="M226.334 17.1592H216.86V24.5385H226.334V17.1592Z" fill="black" />
<path d="M269.761 61.5318H279.641V43.4003H296.396V34.9845H279.641V25.6502H299.997V17.1592H269.761V61.5318Z" fill="black" />
<path d="M59.0965 0.59082H20.5503C9.64568 0.59082 0.805664 9.45154 0.805664 20.3818V59.0185C0.805664 69.9487 9.64568 78.8094 20.5503 78.8094H59.0965C70.0011 78.8094 78.8411 69.9487 78.8411 59.0185V20.3818C78.8411 9.45154 70.0011 0.59082 59.0965 0.59082Z" fill="#00DDB3" />
<path d="M60.1139 18.1094C46.6811 18.1094 41.7034 27.7229 37.7009 35.446L35.0862 40.387C30.8479 48.5773 27.6814 53.5559 19.521 53.5559C19.0144 53.5559 18.5127 53.6559 18.0447 53.8502C17.5766 54.0446 17.1513 54.3294 16.793 54.6885C16.4348 55.0475 16.1505 55.4738 15.9566 55.943C15.7628 56.4121 15.6631 56.915 15.6631 57.4228C15.6645 58.4479 16.0714 59.4306 16.7946 60.1555C17.5178 60.8804 18.4983 61.2883 19.521 61.2897C32.9591 61.2897 37.9367 51.6761 41.9392 43.9531L44.5487 39.0121C48.7923 30.8218 51.9588 25.8432 60.1139 25.8432C60.6209 25.8439 61.1231 25.7444 61.5918 25.5503C62.0605 25.3563 62.4864 25.0716 62.8452 24.7125C63.204 24.3533 63.4888 23.9268 63.683 23.4573C63.8772 22.9878 63.977 22.4845 63.977 21.9763C63.9756 20.9502 63.568 19.9667 62.8437 19.2416C62.1193 18.5166 61.1375 18.1094 60.1139 18.1094Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_274_2135">
<rect width="400" height="78.232" fill="white" transform="translate(0.805664 0.59082)" />
</clipPath>
</defs>
</svg>
#LottieFilesLogo {
width: 100px;
position: absolute;
top: 0;
left: 24px;
}
.container {
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
background: #fff;
}
.controls {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
input[type="range"],
input[type="number"],
select {
width: 300px;
padding: 5px;
margin: 5px;
border-radius: 4px;
border: 1px solid #ccc;
}
.event-log-container {
width: 300px;
height: calc(100vh - 40px);
overflow-y: auto;
border-left: 1px solid #ccc;
padding: 20px;
margin-left: 20px;
background-color: #fafafa;
}
#event-list {
list-style-type: none;
padding-left: 0;
margin: 0;
font-size: 14px;
line-height: 1.5;
}
/* Styles Configuration */
@font-face {
font-family: "Arboria";
src: url("https://assets.codepen.io/11716235/arboria-bold-webfont.woff2")
format("woff2");
}
/* Brand-based color variables */
:root {
--color-mint: #019d91;
--color-mint-dark: #00c1a2;
--color-white: #ffffff;
--color-black: #000000;
--color-orange: #ff7100;
--color-red: #ff3c00;
--color-green: #00951d;
--color-blue: #00c6ff;
--background-color: var(--color-white);
--text-color: var(--color-black);
--accent-color: var(--color-mint);
--btn-hover: var(--color-mint-dark);
}
/* Base styles */
body {
display: flex;
align-items: center;
height: 100vh;
font-family: "Arboria", "Helvetica Neue", sans-serif;
background-color: var(--background-color);
color: var(--text-color);
margin: 0;
padding: 0;
line-height: 1.6;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
margin-bottom: 0.5rem;
}
/* Links */
a {
color: var(--accent-color);
text-decoration: none;
transition: all 0.2s ease;
}
a:hover {
text-decoration: underline;
}
/* Buttons */
button {
background-color: var(--accent-color);
color: var(--color-white);
border: none;
margin: 10px;
padding: 0.75rem 1.5rem;
font-weight: 600;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover {
background-color: var(--btn-hover);
transform: scale(1.05);
}import { DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web";
const canvas = document.querySelector("canvas");
// Initialize DotLottie instance
let dotLottie = new DotLottie({
autoplay: true,
loop: true,
canvas,
src:
"https://lottie.host/0cbdb3ef-2fa5-4d1d-9e4e-f66c879e010d/D0bRr9d93F.lottie"
});
// Control elements
const playBtn = document.getElementById("play-btn");
const pauseBtn = document.getElementById("pause-btn");
const stopBtn = document.getElementById("stop-btn");
const loopBtn = document.getElementById("loop-btn");
const freezeBtn = document.getElementById("freeze-btn");
const unfreezeBtn = document.getElementById("unfreeze-btn");
const modeDropdown = document.getElementById("mode-dropdown");
const speedSlider = document.getElementById("speed-slider");
const frameSlider = document.getElementById("frame-slider");
const segmentStartInput = document.getElementById("segment-start");
const segmentEndInput = document.getElementById("segment-end");
const setSegmentBtn = document.getElementById("set-segment-btn");
const playbackStateDisplay = document.getElementById("playback-state");
const destroyBtn = document.getElementById("destroy-btn");
// Event log DOM element
const eventLog = document.getElementById("event-list");
// Function to log events
function logEvent(event, extra) {
const logItem = document.createElement("li");
logItem.textContent = `Event: ${event.type}`;
if (extra) {
logItem.textContent += ` ,${extra}`;
}
// Insert log item in event log
if (eventLog.hasChildNodes()) {
eventLog.insertBefore(logItem, eventLog.firstChild);
} else {
eventLog.appendChild(logItem);
}
}
// Event listeners for DotLottie instance
dotLottie.addEventListener("load", (event) => {
const totalFrames = dotLottie.totalFrames - 1;
frameSlider.max = totalFrames;
segmentEndInput.max = totalFrames;
segmentEndInput.value = totalFrames.toString();
logEvent(event);
playbackStateDisplay.textContent = "Loaded";
});
dotLottie.addEventListener("loadError", logEvent);
dotLottie.addEventListener("play", (event) => {
logEvent(event);
playbackStateDisplay.textContent = "Playing";
});
dotLottie.addEventListener("pause", (event) => {
logEvent(event);
playbackStateDisplay.textContent = "Paused";
});
dotLottie.addEventListener("stop", (event) => {
logEvent(event);
playbackStateDisplay.textContent = "Stopped";
});
dotLottie.addEventListener("loop", (event) => {
logEvent(event, `loopCount: ${event.loopCount}`);
});
dotLottie.addEventListener("complete", (event) => {
logEvent(event);
playbackStateDisplay.textContent = "Stopped";
});
dotLottie.addEventListener("frame", (event) => {
frameSlider.value = event.currentFrame;
// logEvent(event);
});
dotLottie.addEventListener("freeze", logEvent);
dotLottie.addEventListener("unfreeze", logEvent);
// Event listeners for control elements
playBtn.addEventListener("click", () => dotLottie.play());
pauseBtn.addEventListener("click", () => dotLottie.pause());
stopBtn.addEventListener("click", () => dotLottie.stop());
loopBtn.addEventListener("click", () => {
const currentLoopState = dotLottie.loop;
dotLottie.setLoop(!currentLoopState);
loopBtn.textContent = currentLoopState ? "Enable Loop" : "Disable Loop";
});
freezeBtn.addEventListener("click", () => dotLottie.freeze());
unfreezeBtn.addEventListener("click", () => dotLottie.unfreeze());
modeDropdown.addEventListener("change", (e) =>
dotLottie.setMode(e.target.value)
);
speedSlider.addEventListener("input", (e) =>
dotLottie.setSpeed(parseFloat(e.target.value))
);
frameSlider.addEventListener("input", (e) =>
dotLottie.setFrame(parseFloat(e.target.value))
);
setSegmentBtn.addEventListener("click", () => {
const startFrame = parseInt(segmentStartInput.value, 10);
const endFrame = parseInt(segmentEndInput.value, 10);
dotLottie.setSegment(startFrame, endFrame);
});
destroyBtn.addEventListener("click", () => {
canvas.remove();
dotLottie.destroy();
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.