stepperjs

StepperJS

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() { ... },
    ended() { ... },
    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 () { ... },
    ended: function () { ... },
    stopped: function () { ... }
});

stepper.start();

Supported browsers

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

License

MIT