💸 Reduce costs by consolidating proprietary analytics & reporting software to open-source & Dash.
Challenge us to replace your analytics with Dash and reduce costs.

Lottie animations in a Dash app

Check out Lottie:

Hi, I’m trying to add Lottie web animations to my Dash app but can’t figure out how to, given the predefined list of Dash HTML components, and I don’t want to resort to using dangeroulsysetInnerHTML.

I know how to add the required Javascript, but how would I add the html player component, for example:

<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_YXD37q.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

The full html code to show an animation:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <lottie-player src="https://assets9.lottiefiles.com/packages/lf20_YXD37q.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

I would appreciate any help.

If you don’t like dangeroulsysetInnerHTML, you could write a Lottie component for Dash. The easiest would probably be to start from the React component,

1 Like

I never head about Lottie before, but it looks really cool! And since it just started raining, i can’t work on my projects outside, so i decided to implement a small component. All options from the react component should be available, but i have not (yet) implemented events. Here is a small example,

import dash
import dash_html_components as html
import dash_extensions as de

# Setup options.
url = "https://assets9.lottiefiles.com/packages/lf20_YXD37q.json"
options = dict(loop=True, autoplay=True, rendererSettings=dict(preserveAspectRatio='xMidYMid slice'))
# Create example app.
app = dash.Dash(__name__)
app.layout = html.Div(de.Lottie(options=options, width="25%", height="25%", url=url))

if __name__ == '__main__':
    app.run_server()

If you decide to give it a spin, you will need the latest version of my dash extensions package,

pip install dash-extensions==0.0.13

Cool! @emil could you share a screenshot or gif of what this looks like?

Thanks! It’s just a rendering of whatever animation is provided. Here is the example from above,

EDIT: Bonus info. The animation data file is (only) 23KB :upside_down_face:

3 Likes

Very sweet :smiley_cat:

1 Like

Thank you for the help!

Small problem @Emil , when I click on the animation it pauses, I tried fixing this myself by adding the

isClickToPauseDisabled=True , from: https://github.com/chenqingspring/react-lottie/issues/81

property in the options field (and de.Lottie field),but this didn’t change anything. Sorry for the nitpick.