[New Plugin] Lottie Animations

Hi community,

In few words, if you are interested in a player for your lottie animations, this plugin is what you need :wink:

The plugin is designed to run Lottie Animations in few clicks.
Lottie Animations Source

You just need to:

  1. Install the plugin
  2. Use Lottie Player element on your page
  3. Configure it, give it at least a lottie animation source file
  4. Enjoy it :purple_heart:

DEMO PAGE
EDITOR
PLUGIN
OTHER PLUGINS

For collaborations or any question, feel free to contact me :wink:

Mr. Bubbles

Hi @bubbleis :wave:
This is what i am looking for :relieved:
Thanks :pray:

Yo, my man
Thank you for nice words, really appreciate this <3
Hope it fits all your needs with Lottie.

Kind regards,
Mr. Bubbles

Just installed the plugin.

Works great thanks.

A question. I do now want to autoplay the Lottie. So, I play it on hover.

But I do want to show the end frame so the user sees something they can click on before starting the animation.

Is there a way?

Best, Peter

lottie files have a duration field you can find in lotties…you can use that value to structure things in Bubble app to ensure it runs through the entire animation duration.

Thanks Boston,

I was a bit unclear. My use case is; I want to show a checkmark icon, that on hover will play the animation. Since the animation starts with a blank frame I need another way to show the checkmark by default.

I now use an image. But that seems not so smooth and just thinking I’m missing something really simple here.

Cheers.

In the tutorial I sent you via private message, the setup uses an option set to store the ID of the lottie file and uses an HTML element to display the lottie file using the lottie file provided code. The setup replaces the lottie files ID in the code dynamically with the option set.

If you wanted to use that approach, you could have a lottiefile that is a checkmark and then conditionally say when the HTML element is hovered to change the HTML to have the lottie file you want to ‘play’…this would be done as in the tutorial for changing the ID of the HTML using the option set values.