Lottie animations in a Dash app

Dash Python
3

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
2 Likes