Black Lives Matter. Please consider donating to Black Girls Code today.

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
1 Like

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.

Hi Emil, thank you for the great work! Unfortunately I tried your Lottie example and it does not seem to work on my side :confused:
I use python 3.6 with dash-extensions 0.0.31, dash 1.16.1

I just tried with a clean environment (Min 20, python 3.8.1, dash 1.16.2, dash-extensions 0.0.31) and the example works. What errors do you see?

Sure here are screenshots from the code I run with the versions and the result, a blank page