# Rekapi Controls Rekapi Controls is a set of graphical tools for interacting with [Rekapi](http://jeremyckahn.github.com/rekapi/) animations in a browser. The goal of this project is to expose user-friendly UI components for working with animations. Components include: - A scrubber for controlling the playback and position of the animtion. Dependencies for Rekapi Controls: - [Rekapi](https://github.com/jeremyckahn/rekapi/) - [Underscore](https://github.com/documentcloud/underscore) - [Shifty](https://github.com/jeremyckahn/shifty) - [jQuery Dragon](https://github.com/jeremyckahn/dragon) - [Font Awesome](http://fortawesome.github.com/Font-Awesome/) All dependencies can be found in `dist/`. ## Using Rekapi Controls First, load the dependencies. If you don't want to hunt down the source files for everything, you can just use the minified dependency files: - dist/jquery.min.js - dist/rekapi.bundle.min.js - dist/rekapi-controls.min.js - dist/dragon-bundle.js - dist/jquery.dragon-slider.css - dist/rekapi-controls.css - dist/font-awesome/css/font-awesome.css There are a few asset files that are required, but the above files will load those for you. Create a Rekapi animation. Please see the [documentation on Rekapi](https://github.com/jeremyckahn/rekapi/blob/master/README.md) for more information, but here's a quick, copy/paste-able example: ````html ```` Assuming that `kapi` is our Kapi instance, add an interactive scrubber to it like so: ````javascript var controls = new RekapiScrubber(kapi); ```` Poof! That's all there is to it. You can now control the animation with your mouse.