A simple core-based tweening to create animations
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitattributes
.gitignore
.npmignore
LICENSE
README.md
bower.json
gulpfile.js
index.js
package.json

README.md

Tactween

A simple core-based tweening to create animations

Install

CDN: coming soon

Download:

  • releases: HERE
  • bower: bower install tactween
  • npm: npm install tactween

Usage

Include tactween.js into your page:

<script src="./tactween.js"></script>

And let's animate anything!

// from 0 to 100
tactween(100, {
    duration: 1500,
    change: function(v) {
        progress.style.width = v.value + '%';
    }
})

Reference

tactween(props, options);

  • props - is an (number, array, object) the value(s) you want to animate.
  • options - is an object to setup the animation.
  • duration - is in milliseconds (default: 1000)
  • timing - is an function to describe how to intermediate values calculated (default: (fraction) => { return fraction }}
  • before - (optional) is called before animation start
  • change - (optional) is called at every change
  • complete - (optional) is the completion

Examples

Properties

// Number
tactween(1000, {
    change: function(v) { milliseconds = v.value; }
});

// Array may comprise only two elements
tactween([-100, 100], {
    change: function(v) { milliseconds = v.value; }
});

// Object
tactween({
    r: [0, 255],
    g: [0, 255],
    b: [0, 255]
}, {
    change: function(v) {
        document.body.style.background = (
            'rgb(' + (v.r ^ 0) + ',' + (v.g ^ 0) + ',' + (v.b ^ 0) + ')';
        );
    }
});

Timing

// Linear
tactween(1000, {
    timing: function(fraction) { return fraction; },
    change: function(v) { anything = v.value; }
});

// Quad
tactween(1000, {
    timing: function(fraction) { return Math.pow(fraction, 2); },
    change: function(v) { anything = v.value; }
});

// Circ
tactween(1000, {
    timing: function(fraction) { return 1 - Math.sin(Math.acos(fraction)); },
    change: function(v) { anything = v.value; }
});

// etc...

LICENSE

MIT