How to integrate Lottie Interactivity with Svelte

Question

I'm trying to integrate Lottie Interactivity into my Svelte code. Unfortunately, out-of-the-box it throws error codes.

When you dig into their docs, they provide hooks for React and Vue — but no Svelte!

I'm still relatively new with Svelte, so if people can even provide pointers as to how to get started with integrating this into Svelte, I would greatly appreciate this!

(And before anyone asks — I'm talking about Lottie Interactivity, not Lottie Player.)

Answer 1

Looks like you have to listen for the load event to create the animation REPL

<script>
    import '@lottiefiles/lottie-player'
    import { create } from '@lottiefiles/lottie-interactivity'

    function handleLoad(event) {
        create({
            mode: 'scroll',
            player: '#firstLottie',
            actions: [
                {
                    visibility: [0, 1],
                    type: 'seek',
                    frames: [0, 100],
                },
            ],
        });
    }
</script>

<div>   
    <lottie-player
        id="firstLottie"                     
        src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json"
        style="width:400px; height: 400px;"
        on:load={handleLoad}
    >
    </lottie-player>
</div>

<style>
    div {
        height: 2000px;
        padding-top: 500px;
    }
</style>