search

LottieFiles / svelte-lottie-player

Lottie Player component for Svelte
MIT License
134 stars 16 forks source link

How to control manually? #1

Closed braebo closed 3 years ago

braebo commented 3 years ago

First off- thanks for this amazing package! I spent way too long trying to get lottie to play nicely with Svelte. Meanwhile this just works 🎉

Second- I've been struggling with manually triggering the play() event.

After importing with import { LottiePlayer, play } from '@lottiefiles/svelte-lottie-player';

When I run play(), I'm told it's not a function.

Sorry for the confusion!

alex-harper commented 3 years ago

Hi @FractalHQ,

Glad you're finding the project useful! I think you want to be binding the play function on the child component like so:

<script>
    import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
    let playLottie;
</script>

<button on:click={playLottie}>
    Click to play!
</button>

<LottiePlayer
  src = 'https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json'
    width = 400,
    bind:play={playLottie}
/>

Working demo here

braebo commented 3 years ago

Awesome! This is even better than what I had