The GIF tag the internet deserves
<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
requestAnimationFrameloop to play back the gif at its natural frame rate
Here's a demo! It just might work in your browser!
Spins through the frames at its natural rate multiplied by speed
<x-gif src="definitely_cats.gif" speed="2.1"></x-gif>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>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><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.
<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
- Polymer element - DONE!
- Angular directive - TODO
- React component - TODO
- Ember component - TODO
- 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