Complete code
import useLottie from '<https://unpkg.com/@matoseb/uselottie/build/bundle/index.js>';
// define actions
const ACTION = {
idle: "active-release-end",
holding: "start, hold",
holdingLoop: "hold, hold-end",
release: "hold-end, release-end",
activeHolding: "active-hold, active-release",
activeReleased: "active-release, active-release-end",
};
// create controller
const { onLoad, onComplete, play, getElem, isPlaying } = useLottie({
container: '.lottie',
path: "/animations/heart/data.json",
debug: true,
});
// wait for setup
onLoad(() => {
// go to a state
play(ACTION.idle);
// check if pressing
getElem(".heart").onpointerdown = () => {
if (isPlaying(ACTION.release)) {
// pressing OFF
play(ACTION.activeHolding);
} else {
// pressing ON
play(ACTION.holding);
}
};
// check if releasing
getElem().onpointerup = () => {
// if holding or looping
if (isPlaying(ACTION.holding, ACTION.holdingLoop)) {
// release ON
play(ACTION.release);
} else if (isPlaying(ACTION.activeHolding)) {
// release OFF
play(ACTION.activeReleased);
}
};
});
// check if an animation ended and trigger a loop
onComplete(() => {
if (isPlaying(ACTION.holding)) {
play(ACTION.holdingLoop, { loop: true });
}
});