TweenJS: Animate, Tween & Sequence in Javascript

There were a lot of requests for tweening support in EaselJS, so to address this I thought I’d try writing a companion tweening library. I started in on this a couple days ago, and just posted the very early results to a new GitHub repo.

This is very much pre-alpha, untested, undocumented, and subject to change, but I thought I’d share it and solicit feedback.

It has a simple but powerful API that uses chained method calls to create complex tweens (similar to Graphics in EaselJS). For example, the following code will create a new tween instance that tweens the target’s x value to 300 for 400ms, waits 500 ms, then tweens the target’s alpha to 0 over 1s, sets its visible to false, and calls the onComplete function.

var myTween = Tween.get(myTarget).to({x:300},400).wait(500).to({alpha:0},1000).set({visible:false}).call(onComplete);

You can also use it to sequence commands, without tweening at all:

var mySeq = Tween.get(target).call(doStuff,[param]).wait(500).set({prop:value}).set({prop:value},foo).call(allDone);

Let me know what you think. We’re still considering whether it should live completely on its own, or be a part of EaselJS. Right now it has no dependencies on EaselJS, but it will use the same Ticker class if available. It should work to tween / sequence just about anything in Javascript, but so far I’ve only tested it with EaselJS and HTML5 canvas.

You can check out an example of TweenJS in action here. Have a look at the source code to get a better sense of how things work.

You can grab the library from the TweenJS GitHub Repo.

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

10 Comments

  1. Just loved the API. Really simple and nice/easy to see.
    I’ll do some tests with TweenJS for sure!

    Thanks.

  2. Looks good and could eventually be advertised on EaselJS website.
    Please keep it standalone but pluggable in EaselJS.

  3. I quite like Raphael’s tweening API:
    http://raphaeljs.com/reference.html#animate
    something like that for Canvas would be awesome 🙂

  4. Grant – I was wishing recently that you would do a tweening engine for javascript. With your background in actionscript and the tweening API’s there, I know you’ll do it properly. I’ll be watching it’s development closely. The API looks good.
    Thanks,
    Dan.

  5. This is great, and essential. I also like the idea of keeping it standalone but able to integrate in EaselJS. Will definitely keep watching this develop.

  6. Hey Grant this is really cool, I like the chained syntax. Very JS friendly and intuitive!

  7. Wouldn’t you know it. There’s another beer I owe you. Great stuff Grant!

  8. Definately keep it seperate from Easel please.

  9. no easing? 🙁

  10. Long time fan of your tweening libs, real happy to find this project its exactly what I need, migrating my dev over from flash to html5

    Thanks a lot for all your fine work!

    btw your website appears to need the grass mowed. I was hoping the mouse would sort of slice it when i click dragged, that’d be a fun effect

Comments are closed.