Take control of your CSS keyframe animations
npm install jogwheel
Take control of your CSS keyframe animations
jogwheel
> Health
[![ci][ci-image]][ci-url]
[![coverage][coverage-image]][coverage-url] [![climate][climate-image]][climate-url]
> Availability
[![npm][npm-image]][npm-url] [![cdn][cdn-image]][cdn-url] [![npm-dl][npm-dl-image]][npm-dl-url]
> Activity
[![pr][pr-image]][pr-url] [![issue][issue-image]][issue-url]
> Conventions and standards
[![dependency-manager][dependency-manager-image]][dependency-manager-url] [![release-manager][release-manager-image]][release-manager-url] [![ecma][ecma-image]][ecma-url] [![codestyle][codestyle-image]][codestyle-url] [![license][license-image]][license-url] [![commitizen][commitizen-image]][commitizen-url]
- [x] separation of concerns: Declare animations with CSS
- [x] full control: Play, pause and scrub your animations
- [x] animation sequences: No brittle fiddling with animationEnd
- [ ] world peace
npm install --save jogwheel
`Usage
:warning: 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.
$3
jogwheel exposes its API as CommonJS module. Using the export and bundling your JavaScript with browserify, webpack or rollup is recommended.`js
// import the polyfill
import 'web-animations-js';// import jogwheel
import jogwheel from 'jogwheel';
// Select target element
const element = document.querySelector('[data-animated]');
// Construct jogwheel instance from element
const player = jogwheel.create(element);
// Jump halfway into the animation
player.seek(0.5);
`$3
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.* Development v1.4.5
* Production v1.4.5
* Development latest
* Production latest
Fast track example
`shell
Install cross-platform opn command
npm install -g opn-cliDownload example
curl -L https://git.io/vreEP > jogwheel-example.htmlOpen example in default browser
opn jogwheel-example.html
`All the code
`html
CDN example
Paused 0.5
Paused 0.5
Paused 0.5
`---
See API Documentation for details and examples for more use cases.
Browser support
jogwheel performs cross browser testing with SauceLabs
Limitations
Depending on the WebAnimations implementation you choose there are some limitations for properties usable with jogwheel.| Feature | Test | Issue | Blink | Gecko |
web-animations-js 2.1.4 | web-animations-next 2.1.4 |
|:--------------------------|:-----------:|:-----:|:---------:|:---------:|:-------------------------:|:---------------------------:|
|animation-timing-function| [Link][1] | #161 | :warning: | :warning: | :warning: | :warning: |
|filter | [Link][2] | #162 | :warning: | :warning: | :warning: | :warning: |
Development
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.`shell
Clone repository, cd into it
git clone https://github.com/marionebl/jogwheel.git
cd jogwheel
Install npm dependencies
npm install
Start the default build/watch task
npm start
`
This will watch all files in source and start the appropriate tasks when changes are detected.Roadmap
jogwheel is up to a lot of good. This includes but is not limited to
- [x] 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.
[1]: http://codepen.io/marionebl/pen/RrbzOO
[2]: http://codepen.io/marionebl/pen/RrbzOO
---
jogwheel
v1.4.5` is built by Mario Nebl and contributors with :heart:[npm-url]: https://www.npmjs.org/package/jogwheel
[npm-image]: https://img.shields.io/npm/v/jogwheel.svg?style=flat-square
[npm-dl-url]: https://www.npmjs.org/package/jogwheel
[npm-dl-image]: http://img.shields.io/npm/dm/jogwheel.svg?style=flat-square
[cdn-url]: https://wzrd.in/standalone/jogwheel@latest
[cdn-image]: https://img.shields.io/badge/cdn-v1.4.5-5ec792.svg?style=flat-square
[ci-url]: https://travis-ci.org/marionebl/jogwheel
[ci-image]: https://img.shields.io/travis/marionebl/jogwheel/master.svg?style=flat-square
[coverage-url]: https://coveralls.io/r/marionebl/jogwheel
[coverage-image]: https://img.shields.io/coveralls/marionebl/jogwheel.svg?style=flat-square
[climate-url]: https://codeclimate.com/github/marionebl/jogwheel
[climate-image]: https://img.shields.io/codeclimate/github/marionebl/jogwheel.svg?style=flat-square
[pr-url]: http://issuestats.com/github/marionebl/jogwheel
[pr-image]: http://issuestats.com/github/marionebl/jogwheel/badge/pr?style=flat-square
[issue-url]: undefined
[issue-image]: http://issuestats.com/github/marionebl/jogwheel/badge/issue?style=flat-square
[dependency-manager-image]: https://img.shields.io/badge/tracks%20with-greenkeeper-5ec792.svg?style=flat-square
[dependency-manager-url]: https://github.com/greenkeeperio/greenkeeper
[release-manager-image]: https://img.shields.io/badge/releases%20with-semantic--release-5ec792.svg?style=flat-square
[release-manager-url]: https://github.com/semantic-release/semantic-release
[ecma-image]: https://img.shields.io/badge/babel%20stage-0-5ec792.svg?style=flat-square
[ecma-url]: https://github.com/babel/babel
[codestyle-url]: https://github.com/sindresorhus/xo
[codestyle-image]: https://img.shields.io/badge/code%20style-xo-5ec792.svg?style=flat-square
[license-url]: ./license.md
[license-image]: https://img.shields.io/badge/license-MIT-5ec792.svg?style=flat-square
[commitizen-url]: http://commitizen.github.io/cz-cli/
[commitizen-image]: https://img.shields.io/badge/commitizen-friendly-5ec792.svg?style=flat-square
[gitter-image]: https://img.shields.io/badge/gitter-join%20chat-5ec792.svg?style=flat-square
[gitter-url]: https://gitter.im/sinnerschrader/patternplate