https://github.com/bjornstar/tomes-tween

Motion tween engine using "ease"
https://github.com/bjornstar/tomes-tween

Last synced: 3 months ago
JSON representation

Motion tween engine using "ease"

• Host: GitHub
• URL: https://github.com/bjornstar/tomes-tween
• Owner: bjornstar
• Fork: true (component/tween)
• Created: 2013-02-15T04:30:34.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2013-02-15T04:34:00.000Z (about 12 years ago)
• Last Synced: 2024-04-15T12:19:30.015Z (about 1 year ago)
• Language: JavaScript
• Size: 112 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# tween

  Motion tween component using [ease](https://github.com/component/ease).

## Installation

    $ component install component/tween

## Example

```js

var Tween = require('tween');

var raf = require('raf');

var button = document.querySelector('button');

var tween = Tween({ rotate: 0, opacity: 0 })

  .ease('out-bounce')

  .to({ rotate: 360, opacity: 1  })

  .duration(800);

tween.update(function(o){

  button.style.opacity = o.opacity;

  button.style.webkitTransform = 'rotate(' + (o.rotate | 0) + 'deg)';

});

tween.on('end', function(){

  animate = function(){};

});

function animate() {

  raf(animate);

  tween.update();

}

animate();

```

## API

### Tween(obj:Object|Array)

  Initialize a new `Tween` with `obj`.

### Tween#reset()

  Reset the tween.

### Tween#to(obj:Object|Array)

  Tween to `obj` and reset internal state.

  

     tween.to({ x: 50, y: 100 })

### Tween#duration(ms:Number)

  Set duration to `ms` [500].

### Tween#ease(fn:String|Function)

  Set easing function to `fn`.

  

     tween.ease('in-out-sine')

### Tween#update(fn:Function)

  Set update function to `fn` or 

  when no argument is given this performs

  a "step".

## License

  MIT