❤
npm
Sign UpSign In

jogwheel

1.4.5 • Public • Published
Take control of your CSS keyframe animations

jogwheel


Health

ci coverage climate

Availability

npm cdn npm-dl

Activity

pr issue

Conventions and standards

dependency-manager release-manager ecma codestyle license commitizen

About

jogwheel gives you the power to take full control of your CSS keyframe animations via JavaScript.

  • separation of concerns: Declare animations with CSS
  • full control: Play, pause and scrub your animations
  • animation sequences: No brittle fiddling with animationEnd
  • world peace

Install

jogwheel is available on npm.

npm install --save jogwheel

Usage

⚠️ 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.

CommonJS

jogwheel exposes its API as CommonJS module. Using the export and bundling your JavaScript with browserify, webpack or rollup is recommended.

// 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);

CDN

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 command 
npm install -g opn-cli
 
# Download example 
curl -L https://git.io/vreEP > jogwheel-example.html
 
# Open example in default browser 
opn jogwheel-example.html

All the code

<!doctype html>
<html>
  <head>
    <title>CDN example</title>
  </head>
  <style>
    @keyframes bounce {
      0%, 100% {
        transform: none;
      }
      50% {
        transform: translateY(100%);
      }
    }
 
    @-webkit-keyframes bounce {
      0%, 100% {
        -webkit-transform: none;
      }
      50% {
        -webkit-transform: translateY(100%);
      }
    }
 
    [data-animated] {
      animation: bounce 10s;
      animation-fill-mode: both;
      animation-play-state: paused;
      animation-iteration-count: infinite;
      display: inline-block;
      height: 100px;
      width: 100px;
      background: #333;
      border-radius: 50%;
      color: #fff;
      font-family: sans-serif;
      line-height: 100px;
      text-align: center;
    }
    [data-animated]:nth-child(2) {
      animation-delay: 2.5s;
    }
    [data-animated]:nth-child(3) {
      animation-delay: 5s;
    }
  </style> 
  <body>
    <div data-animated>Paused 0.5</div>
    <div data-animated>Paused 0.5</div>
    <div data-animated>Paused 0.5</div>
    <script src="https://wzrd.in/standalone/web-animations-js@latest"></script> 
    <script src="https://wzrd.in/standalone/jogwheel@latest"></script> 
    <script>
      var elements = document.querySelectorAll('[data-animated]');
      var player = jogwheel.create(elements);
      player.seek(0.5);
 
      setTimeout(function(){
        player.play();
        for (var i = 0; i < elements.length; i += 1) {
          elements[i].innerText = 'Playing';
        }
      }, 5000);
    </script> 
  </body>
</html>

See API Documentation for details and examples for more use cases.

Browser support

jogwheel performs cross browser testing with SauceLabs

Browser Support

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 #161 ⚠️ ⚠️ ⚠️ ⚠️
filter Link #162 ⚠️ ⚠️ ⚠️ ⚠️

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.

# 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

  • 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.

jogwheel v1.4.5 is built by Mario Nebl and contributors with ❤️ and released under the MIT License.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.4.5
    1
    • latest

Version History

Package Sidebar

Install

npm i jogwheel

Repository

github.com/marionebl/jogwheel

Homepage

github.com/marionebl/jogwheel#readme

Weekly Downloads

3

Version

1.4.5

License

MIT

Last publish

Collaborators

  • marionebl
Try on RunKit
Report malware