Take control of your CSS keyframe animations
Conventions and standards
- separation of concerns: Declare animations with CSS
- full control: Play, pause and scrub your animations
- animation sequences: No brittle fiddling with animationEnd
- world peace
jogwheel is available on npm.
npm install --save jogwheel
⚠️ Please note jogwheel assumes
Element.prototype.animate is defined and returns a valid WebAnimationPlayer instance.
To achieve this you will have to include a WebAnimation polyfill, web-animations-js by Google is recommended.
The usage examples show recommended ways to include the polyfill.
// import the polyfill;// import jogwheel;// Select target elementconst element = document;// Construct jogwheel instance from elementconst player = jogwheel;// Jump halfway into the animationplayer;
jogwheel provides prebundled downloads via wzrd.in.
Either embed or download the standalone bundle. Given you do not use a module system the standalone build will pollute
window.jogwheel. This usage is viable but not recommended.
Fast track example
# Install cross-platform opn commandnpm install -g opn-cli# Download examplecurl -L https://git.io/vreEP > jogwheel-example.html# Open example in default browseropn jogwheel-example.html
All the code
CDN examplePaused 0.5Paused 0.5Paused 0.5
jogwheel performs cross browser testing with SauceLabs
Depending on the WebAnimations implementation you choose there are some limitations for properties usable with jogwheel.
You dig jogwheel and want to submit a pull request? Awesome! Be sure to read the contribution guide and you should be good to go. Here are some notes to get you coding real quick.
# Clone repository, cd into itgit clone https://github.com/marionebl/jogwheel.gitcd jogwheel# Install npm dependenciesnpm install# Start the default build/watch tasknpm start
This will watch all files in
source and start the appropriate tasks when changes are detected.
jogwheel is up to a lot of good. This includes but is not limited to
- super-awesome cross-browser tests
- unit-tested documentation code examples, because rust isn't the only language that can do cool dev convenience stuff
- an interactive playground and animation editor
- a plug-and-play react integration component
See Roadmap for details.