Lottie file not rendering?

Orbit · 2025-01-21T17:23:43.335Z

Hello bubble,

I have a Lottie animation placed in an HTML element on my page, but it’s not behaving as expected. It should loop from 0-100 once and then repeat indefinitely 100-110, following LottieInteractive settings. However, Now it just plays once, I’m encountering the following console errors:

lottie-interactivity.js:31 Uncaught Error: [lottieInteractivity]:Specified player:undefined is invalid.

custom-element.js:21 Uncaught NotSupportedError: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “lottie-player” has already been used with this registry
at custom-element.js:21:25
at custom-element.js:20:29
at __decorate (tslib.es6.js:58:95)
at lottie-player.ts:233:10
at lottie-player.js:1:140
at lottie-player.js:1:217

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lottie segments</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
</head>
<body>
    <div class="container">
        <lottie-player
            src="https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json"
            id="lottie-player"
            autoplay
            style="width: 200px; height: 200px;">
        </lottie-player>
    </div>
</body>
</html>
<script>
  let li = LottieInteractivity.create({
    player: '#lottie-player',
    mode: 'chain',
    actions: [
        {
            state: 'loop',
            frames: [0, 100],
            transition: 'onComplete'
        },
        {
            state: 'loop',
            frames: [100, 110]
        }
    ]
});
</script>

Adding this in a codepen.io works fine so im not sure what bubble is blocking? I know almost nothing when it comes to JS but im very open to learn and i have tried with chatgpt but no sucess.

Thank you

system · 2025-04-01T17:23:50.654Z

This topic was automatically closed after 70 days. New replies are no longer allowed.