Show and tell: GifPlayer dash plugin

A while back, I made a community post about creating playable gifs: Show and Tell: Creating playable GIFS to document interactive features. While that approach worked, it had a few drawbacks, namely:

  • Required writing javascript and all the bundling fun and extra overhead that goes along with that.
  • Needed a hack that worked with dcc.Location and onhashchange listeners.
  • Was a huge pain to make compatible with IE. In fact, I couldn’t get this to work with IE in dash > 0.39, so that inspired me to make this plugin.

This component plugin is built on top of react-gif-player and its usage is super simple, all you have to do is provide two sources, one for the gif and the other for the still image that is used before the gif is played.

Example

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',
    )
])

You can find a full working example in the github repo demo folder.

Happy to hear your feedback! For any bugs or feature requests, please submit them to the issue tracker.

4 Likes