Lottie animations in a Dash app

[Alex2]

Check out Lottie:
https://lottiefiles.com/

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.

[Emil]

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,

react-lottie

[Emil]

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

[chriddyp]

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

[Emil]

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

[chriddyp]

Very sweet

[Alex2]

Thank you for the help!

[Alex2]

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.

[p_bch]

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

[Emil]

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?

[p_bch]

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

[p_bch]

Hi guys, after digging into the error it happened to be a proxy issue ! It works well now when I am refering to an url from Lottie. Is there a way to refer to a local file via something like url=“lottie_file.json” ? It keep having a blank page for now. thanks !

Here is my codebase:

[p_bch]

I managed to do it using flask api, it may help someone else:

from flask import send_from_directory

server = app.server

@server.route("/loader", methods=['GET'])
def serving_lottie_loader():
    directory = os.path.join(os.getcwd(), "assets/lottie")
    return send_from_directory(directory, "loader-cluster.json")

[jon_k]

This is great!

Thankyou for this solution