<x-gif>

The GIF tag the internet deserves

Usage

<x-gif> is a web component for flexible GIF playback. Speed them up, slow them down, play them in reverse, synch multiple beats to a rhythm, synch them to audio, whatever you like.

Import Polymer

<script src="bower_components/platform/platform.js"></script>

Import X-Gif

<link rel="import" href="bower_components/x-gif/dist/x-gif.html">

Enjoy limitless GIF possibilities

<x-gif src="probably_cats.gif"></x-gif>

What does it do?

AJAX fetches the GIF as a binary stream
Slices the GIF into frames like a total boss
Stacks the frames one on top of the other
Starts a requestAnimationFrame loop to play back the gif at its natural frame rate

Here's a demo! It just might work in your browser!

Options

Speed

Spins through the frames at its natural rate multiplied by speed

<x-gif src="definitely_cats.gif" speed="2.1"></x-gif>

Bpm

Breaks the GIF across 1 or more beats (depending on how long the GIF is), where each beat is 1/bpm minutes long.

<x-gif src="something_dumb_from_buzzfeed.gif" bpm="120"></x-gif>

Hard-bpm

Just like bpm but locks all GIFs to one beat, regardless of how long they were originally.

<x-gif src="something_dumb_from_buzzfeed.gif" hard-bpm="120"></x-gif>

Stopped

<x-gif src="something_rad_off_reddit.gif" stopped></x-gif>

Stops the requestAnimationFrame loop inside the GIF. You can add or remove the stopped attribute and it will stop or start. Obvs.

Sync

<x-gif src="mr_t_works_it.gif" sync></x-gif>

Defers playback to an external clock, such as beat data from an audio stream to make rad synchronised GIFs & music. See an example.

Check out the rest of the demos

Status

Polymer element - DONE!
Angular directive - TODO
React component - TODO
Ember component - TODO

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

License

MIT License

kenke7/x-gif

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages