Lottie animation won't play on click

[rubiniandco (Jader Rubini)]

Hey there folks, first build in a veeeery long time, and also first post here ever

I’ve added a Lottie animation that’s supposed to work when it’s clicked, but for some reason it just won’t play. The animation plays perfectly both when I hover it on the Assets panel and when I select it on the canvas and click “preview animation”, but for some reason the “on click > Lottie playback” interaction does nothing.

Can someone please enlighten me?
Much appreciated

---

Here is my public share link:
Webflow - Rubini.co (the heart icon down in the footer)

[Port_of_Folio]

You might need to share your read-only link to inspect but make sure that you’ve added a click interaction within Webflow as well. I don’t believe the animation will work just by placing it on the page.

How to Enable a Webflow Share Link

If you’re new to the Webflow forum, welcome! Anyone with the read-only link of your project can explore your project in the Designer. Any changes they make while in read-only mode will not be saved. This is helpful when you need design advice or when you need help troubleshooting an issue in your project. [Create and use a read-only share link — Webflow tutorial]

[rubiniandco (Jader Rubini)]

@Port_of_Folio I’ve updated the original post with the read-only link, thanks for clarifying.

I forgot to mention that I did set up the interaction for the onClick event, just as described on this tutorial from the University. I didn’t expect it would work just by placing it.

[Port_of_Folio]

Hmm… I haven’t used this method.

I set them up like the attached. Instead of “lottie playback” I use “Start an animation” and then set the play for 0 and then end at 100.

edit: in my first screen grab, be sure to set “duration” to 0sec or there will be a delayed click reaction

[rubiniandco (Jader Rubini)]

Perfect! It’s working now and I also managed to reset it after playback so it plays with every single click.
Thanks a bunch, bro

[carissakeva (Carissa)]

Can you please share how you managed to reset it so it plays with every click? Is it set to play on click on a button? I cannot figure it out!

[carissakeva (Carissa)]

Hello all, I just figured it out. First, do not set an initial state, and then make sure everything in timing is set to 0 on your first lottie frame, in order to allow it to reset to play on multiple button clicks. The second lottie frame does need the timing set to 100% and the same length of your animation. Hope this helps someone else along the way.