Giter Site home page Giter Site logo

meandmax / jogwheel Goto Github PK

View Code? Open in Web Editor NEW

This project forked from marionebl/jogwheel

1.0 3.0 0.0 356 KB

Take control of your CSS keyframe animations

Home Page: http://marionebl.github.io/jogwheel/

License: Other

JavaScript 86.89% HTML 6.95% CSS 3.93% Smarty 2.24%

jogwheel's Introduction

Take control of your CSS keyframe animations

jogwheel


Health

ci coverage climate

Availability

npm brcdn 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 brcdn.org. 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.

<!doctype html>
<html>
  <head>
    <title>CDN example</title>
  </head>
  <style>
    @keframes bounce {
      0% {
        transform: none;
      }

      25% {
        transform: translateY(-100%);
      }

      50% {
        transform: none;
      }

      75% {
        transform: translateY(100%);
      }

      100% {
        transform: none;
      }
    }

    [data-animated] {
      animation: bounce 1s;
      animation-fill-mode: both;
      animation-play-state: paused;
      height: 100px;
      width: 100px;
      background: #333;
      border-radius: 50%;
    }
  </style>
  <body>
    <div data-animated></div>
    <script src="https://www.brcdn.org/web-animations-js/latest/?standalone=web-animations-js&uglify=true" />
    <script src="https://www.brcdn.org/jogwheel/latest/?standalone=jogwheel&uglify=true" />
    <script>
      var element = document.querySelector('[data-animated]');
      var player = JogWheel.create(element);
      player.seek(0.5).play();
    </script>
  </body>
</html>

See API Documentation for details.

Example

jogwheel shines brightest when used with CSS animations.

JavaScript

import JogWheel from 'jogwheel';
const element = document.querySelector('[data-animated]');
const player = JogWheel.create(element);

// Jump halfway into the animation
player.seek(0.5);

CSS

@keframes bounce {
  0% {
    transform: none;
  }

  25% {
    transform: translateY(-100%);
  }

  50% {
    transform: none;
  }

  75% {
    transform: translateY(100%);
  }

  100% {
    transform: none;
  }
}

[data-animated] {
  animation: bounce 1s;
  /* animation-fill-mode and animation-play-state are recommended */
  animation-fill-mode: both;
  animation-play-state: paused;
  height: 100px;
  width: 100px;
  background: #333;
  border-radius: 50%;
}

HTML

<div data-animated>
</div>

See Examples for more use cases.

Browser support

jogwheel performs cross browser testing with SauceLabs

Browser Support

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.

Fetch, install and start the default watch task

git clone https://github.com/marionebl/jogwheel.git
cd jogwheel
npm install
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-an-play react integration component

See Roadmap for details.


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

jogwheel's People

Contributors

greenkeeperio-bot avatar marionebl avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.