Live
x
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lottiefiles/relottie | Extract Features Example</title></head><body> <h1>relottie - Extract Features Example</h1> <div class="container"> <div class="row"> <h3>Lottie (<a id="lottie-link" target="_blank">link</a>)</h3> <canvas id="player"></canvas> </div> <div class="row text-left"> <h3>Feature List:</h3> <ol id="features"></ol> </div> </div></body></html>
Live
xxxxxxxxxx19
body { text-align: center !important; font-family: monospace;}.container { display: flex; justify-content: center; flex-wrap: wrap;}canvas { width: 300px;}.text-left { text-align: left !important;}
Live
xxxxxxxxxx82
import { DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web";import relottieParse from "https://esm.sh/@lottiefiles/relottie-parse";import relottieStringify from "https://esm.sh/@lottiefiles/relottie-stringify";import relottieExtractFeatures from "https://esm.sh/@lottiefiles/relottie-extract-features";import { TITLES } from "https://esm.sh/@lottiefiles/last";import { unified } from "https://esm.sh/unified";// Typestype FileData = ParseFileData & StringifyFileData & ExtractFeaturesFileData;// Helpersconst fetchData = async (url) => await fetch(url).then((response) => response.json());const createPlayer = (data, canvas) => new DotLottie({ data, canvas, autoplay: true, loop: true });const createFeaturesElement = (features, olElement) => { const fragment = document.createDocumentFragment(); features.forEach((feature) => { const listElement = document.createElement("li"); listElement.textContent = feature; fragment.append(listElement); }); olElement.append(fragment);};const getModifiedTree = (originalTree) => { const tree = { originalTree }; changeColorRgbaValues(tree); return tree;};// Constantsconst LOTTIE_PATH = { json: "https://lottie.host/a62509e1-d0b3-49af-933a-2a7ae8382e7f/kp2QSRVoX5.json", source: "https://lottiefiles.com/animations/confused-lolo-1dBKGRk1cm"};const ELEMENT_ID = { features: "features", player: "player", lottieLink: "lottie-link"};// Setupconst lottieJson = await fetchData(LOTTIE_PATH.json);const lottieJsonStr = JSON.stringify(lottieJson);const processor = unified() .use(relottieParse) .use(relottieExtractFeatures) .use(relottieStringify);const vfile = processor.processSync(lottieJsonStr);const fileData = vfile.data as FileData;const extractFeaturesData = fileData["extract-features"];const features = Array.from(extractFeaturesData.used.keys());// DOM Elementsconst featuresElm = document.getElementById(ELEMENT_ID.features);const playerElm = document.getElementById(ELEMENT_ID.player);const lottieLinkElm = document.getElementById(ELEMENT_ID.lottieLink);// RunlottieLinkElm.setAttribute("href", LOTTIE_PATH.source);createPlayer(lottieJsonStr, playerElm);createFeaturesElement(features, featuresElm);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.