Skip to content
A tiny requestAnimationFrame wrapper to improve usability.
Branch: release
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
html
src
tests
.gitignore
.npmignore
.travis.yml
README.md
karma.conf.js
package-lock.json
package.json
webpack.config.js
yarn.lock

README.md

StepperJS

Build Status codecov

A tiny requestAnimationFrame wrapper to improve usability. - Demo

Installation

npm

$ npm install --save stepperjs

Usage

for Babel

import Stepper from 'stepperjs';
import linear from 'stepperjs/dist/easings/linear';

const stepper = new Stepper({
    duration: 300, // default: 0
    easing: linear, // default: linear
    loop: true, // default: false
    reverse: true // default: false
}).on({
    start() { ... },
    update(n) { ... },
    paused() { ... },
    done() { ... },
    stopped() { ... }
});

stepper.start();

If you want to change options after creating the object

const stepper = new Stepper();

stepper.option('duration', 500);
stepper.option('easing', linear);
stepper.option('loop', false);
stepper.option('reverse', false);

// or

stepper.option({
    duration: 500,
    easing: linear,
    loop: false,
    reverse: false
});

If you want to use multiple easing function.

import Stepper from 'stepperjs';
import linear from 'stepperjs/dist/easings/linear';
import inBack from 'stepperjs/dist/easings/inBack';

const stepper = new Stepper({
    duration: 300,
    easing: [linear, inBack]
}).on({
    update: (n1, n2) => {
        console.log(n1); // value of linear
        console.log(n2); // value of inBack
    }
});

stepper.start();

for Browser

<script type="text/javascript" src="stepperjs.browser-0.2.1.min.js"></script>
var Stepper = stepperjs.Stepper();
var easings = stepperjs.easings;
var stepper = new Stepper({
    duration: 300,
    easing: easings.linear,
    loop: true,
    reverse: true
}).on({
    start: function () { ... },
    update: function (n) { ... },
    paused: function () { ... },
    done: function () { ... },
    stopped: function () { ... }
});

stepper.start();

Supported browsers

  • Latest Firefox
  • Latest Chrome
  • Latest Safari
  • IE8 through latest

License

MIT

You can’t perform that action at this time.