Import

import useLottie from "<https://unpkg.com/@matoseb/uselottie/build/bundle/index.js>"

useLottie()

// as an object
const controller = useLottie({
    container: '.lottie', // find element <div class="lottie"></div>
    path: "/your-path/data.json", // path to your animation .json
    debug: true // show states
    
    // other options are from "lottie-web"
});

// with individual controls
const {play, onLoad, player, /* ...other */ } = useLottie({
    container: '.lottie', // find element <div class="lottie"></div>
    path: "/your-path/data.json", // path to animation
    debug: true // show states
    
    // other options are from "lottie-web"
});

controller.seek()

	// go to a marker
	controller.seek("marker-1");
	
	// go to the end of a sequence
	controller.seek("marker-1, marker-2", { position: 1 });
	
	// control the sequence manually with the mouse
	 window.onpointermove = (event) => {
    const x = event.clientX / window.innerWidth; // 0-1
    seek(0, { position: x });
  };

controller.play()

	// play a sequence
	controller.play("marker-1, marker-2");
	
	// go to a marker, and play from here
	controller.play("marker-1");
	
	// loop
	controller.play("marker-1, marker-2", { loop: true });
	
	// play a sequence from current position
	controller.play("marker-1, marker-2", { force: false });

markers in AE

controller.loop()

	// loop ongoing animation
	controller.loop(true);

	// stop ongoing animation to it’s last frame
	controller.loop(false);

controller.isPlaying()

const sequence1 = "marker-1, marker-2";
const sequence2 = "marker-3, marker-4";

controller.play(sequence1);

// returns true or false
controller.isPlaying(sequence1); // > true;
controller.isPlaying(sequence2); // > false;

// is playing "sequence1" or "sequence2" > true
controller.isPlaying(sequence1, sequence2);

controller.player

The lottie player instance. Official doc: https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage

getElem() getElems()

/* a generated lottie: */

<svg class="lottie-controller">
	<g class="heart">
		<g class="circle">
			<path class="circle-fill first"></path>
			<path class="circle-fill second"></path>
		</g>
	<g>
</svg>

// get the lottie element
controller.getElem() // <svg class="lottie-controller"></svg>

// get the first match
controller.getElem(".circle-fill") // <path class="circle-fill first"></path>

// get an arraylist of elements
controller.getElems(".circle-fill") // [<path class="circle-fill"></path>, <path class="circle-fill"></path>]

Named layers as classes

random()

random() // random from 0 to 0.999999...
random(8) // random from 0 to 7.999999...
random(-2, 5) // random from -2 to 4.999999...
random([0, 1, 2]) // random item -> 0 or 1 or 2

setAnimVariation()

Switch between animation markers, while keeping the ACTION logic.

const ACTION = {
  press: "a-1, a-2", // fallback to default
  active: ["a-2, a-3", "b-2, b-3", "c-2, c-3"], // 3 variations
  release: ["a-3, b-1", "b-3, c-1", "c-3, d-1"], // 3 variations
};

setAnimVariation(1); // pick the second variation (index 1), first would be index 0

play(ACTION.press); // "a-1, a-2"
play(ACTION.active) // "b-2, b-3"

setAnimVariation(random([0, 1, 2])) // randomize

play(ACTION.release) // "a-3, b-1" or "b-3, c-1" or "c-3, d-1"

isPlaying(ACTION.release) // true

Event callbacks

// Event triggered when player is loaded (DOMLoaded)
controller.onLoad(() => {
	console.log("player loaded")
});

// Event triggered at the end of a play
controller.onComplete(() => {
	console.log("animation completed")
});

// Event triggered before playing a sound
controller.onAudio((event) => {
	console.log("audio", event)
});