Hello Lottie Community,
Im trying to figure out how to play a lottie animation first some frames and then loop the rest, i have tried following tutorials and that has taken me this far:
<!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>
But when.i try to add this to my bubble.io application i get the following error code and its not following the LottieInteractivity:
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
Im not sure what i am doing wrong and i have been trying to figure it out now for over 2 days and no luck…
Thankful for any help!