Accessibility Now
Join our upcoming webinar about accessibility standards and legislation. May 19, 2022.
Blog

This web component, gif-player, lets you control the playback of your gif

By  
Binh Bui
Binh Bui
·
On Apr 25, 2018 7:42:00 AM
·
Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.

Is it pronounced “gif” or “jif”? We do not really know. However, we do know one super awesome gif component, called gif-player by CaptainCodeman. This component provides tons of features for playing around with gifs. In this blog post, we are going to show what you can do with it.

Accessing gif frame-by-frame

A Gif can capture epic scenes in the movies, and who does not want to see Deadpool getting smashed by Colossus or the epic battle between Hulk and Ironman?

As you can see, gif-player allows users to access every single frame of the gif with a movement of the mouse. The faster you move, the faster the speed of the gif gets. Now let’s imagine that the full-width of the gif is the progress. Thus, when you point the mouse at the middle, that will correlate to the half timestamp of the gif according to its duration.

Magic tricks are no more magic

Take a look at this trick.

Original

Everyone has played this at least once in his or her life. This game is called “The cup shuffle magic trick.” Were you as good as the cat? Now let’s use gif-player to reveal the trick.

Using the mouse to control the playback

Clever? Yes. Cheating? Maybe. Anyhow, this component can be used as a guide for a more serious step-by-step tutorial.

...

...

Changing speed? That’s easy

The component provides two attributes for this case, which are `speed` and `play`. `play` will turn on autoplay for the gif, and `speed` take in a number and output the gif for you in that speed.

We can all agree that there are some things which are way more impressive in slow motion, for example, the picture above or the mechanics of a keylock and of course, lightning.

Infographic is cool

The possibilities for this component are endless. We have demonstrated plenty of ways to use this element.

This gif shows the infographic for U.S Marriage Rate from 1970 to 2011. With gif-player, we can quickly show what the statistics are for the year 1989, or the year 2005, without needing to wait for it to play.

How about the evolution of racing bike this time? Seeing an infographic will be much more relaxed now, it is handy if your website is full of pictures like this, and you are giving the users the ability to control it.

Compatibility

In general, gif-player yields good performance in the tests. It works on Chrome, Safari, Opera, Firefox, and Edge. Even though it shows up on mobile, controlling it might be difficult, as touching and moving does not do the job. So I would recommend using other functions, like reverse, ping-pong or speed in mobile.

By the way, I would like to address using the source, as well. GIPHY sources produce good results, and other raw gif CDNs do not seem to work.

Component

Mobile-friendly

Library

Working

gif-player

Polymer^2.0.0

C, S, O, F, E

Final thoughts

Having a component like gif-player is rare these days, it is a hidden gem in the web components ecosystem. Making an interactive GIF player for your web application is entertaining, educating, as well as useful. All you need is creativity when using this component. Why not go ahead and start playing with it?

Click here for more awesome web components

Relevant articles:

Binh Bui
Binh Bui
Binh is a Growth Marketer involved with multiple domains ranging from running experiments, campaigns to doing product-led growth stuff. He likes using his brain and he likes random discussions. Out of work, you can see Binh in the Schrodinger gym. Follow Binh on Twitter @buibaobin
Other posts by Binh Bui