Dash plugin for playable gifs
dash-gif-component provides a playable gif dash component that is built on top of react-gif-player.
Plotly's dash documentation can be found here.
While there may be many possible use cases for using a gif in a dash app, the one reason that originally inspired me to add them was to provide a visual aid to show end-users how to use various interactive features.
My original approach was to simply put a gif in an html
<img> tag, but I quickly found out that this didn't work well in practice since the constant looping was a bit overwhelming, especially when there were multiple gifs on the same page.
Hope you enjoy using this plugin.
You can install dash-gif-component with
pip install dash-gif-component
dash-gif-comonent has only one component (
GifPlayer) and it is really easy to setup. All you need to provide are two properties:
gif: A string path to your gif
still: A string path to an image that is used for the "pause" mode*
- There is also an optional property called
autoplaywhich when set to true, will cause the gifs to automatically play. I find this to defeat the purpose of the component, but decided to include this for completeness when replicating react-gif-player.
*Gifsicle is a useful cli-tool that can extract the first, or any, frame of a gif, among other gif related tasks.
Note: if using local files for gif and still, then they must be loaded from the folder that is configured to serve static files. By default, this is set to
import dash_gif_component as gif import dash import dash_html_components as html app = dash.Dash(__name__) app.layout = html.Div([ gif.GifPlayer( gif='assets/my-gif.gif', still='assets/my-still.png', ) ])
For a complete running example, please check out demo/usage.py
While I do find the original style sheet to be excellent on its own, you may still want to make some tweaks here and there. There are only a handful of selectors and overwriting is straightforward. The stylesheet can be referenced in src/lib/components/css/gifplayer.css.
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.