createjs / tweenjs

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.

TweenJS

TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent on or specific to it (though it uses the same Ticker and Event classes by default). It supports tweening of both numeric object properties & CSS style properties.

Example

The API is simple but very powerful, making it easy to create complex tweens by chaining commands.

var tween = createjs.Tween.get(myTarget)
    .to({x:300},400)
    .set({label:"hello!"})
    .wait(500).to({alpha:0,visible:false},1000)
    .call(onComplete);

The example above will create a new tween instance that:

• tweens the target to an x value of 300 over 400ms and sets its label to "hello!"
• waits 500 ms
• tweens the target's alpha to 0 over 1s & sets its visible to false
• calls the onComplete function

Tweens are composed of two elements: steps and actions.

Steps define the tweened properties and always have a duration associated with them (even if that duration is 0). Steps are defined with the "to" and "wait" methods. Steps are entirely deterministic. You can arbitrarily set a tween's position, and it will always set the same properties for that position.

Actions do not have a duration, and are executed between steps. They are defined with the "call", "set", "play", and "pause" methods. They are guaranteed to execute in the correct order, but not at the precise moment in time that is indicated in the sequence. This can lead to indeterminate results, especially when tweens are interacting via the play and pause actions.

Tweens support a number of configuration properties, which are specified as the second param when creating a new tween:

createjs.Tween.get(target, {loop:true, useTicks:true, css:true, ignoreGlobalPause:true}).to(etc...);

All configuration properties default to false. The properties are:

• loop - indicates whether the tween should loop when it reaches the end
• useTicks - the tween will use ticks for duration instead of milliseconds
• css - enables css mapping for some css properties
• ignoreGlobalPause - the tween will continue ticking even when Ticker is paused.

When using Tween.get, you can also specify true as the third parameter to override any active tweens on the target.

createjs.Tween.get(target,null,true); // this will remove any existing tweens on the target.

Support and Resources

• Find examples and more information at the TweenJS web site
• Read the documentation
• Discuss, share projects, and interact with other users on reddit.
• Ask technical questions on Stack Overflow.
• File verified bugs or formal feature requests using Issues on GitHub.
• Have a look at the included examples and API documentation for more in-depth information.

It was built by gskinner.com, and is released for free under the MIT license, which means you can use it for almost any purpose (including commercial projects). We appreciate credit where possible, but it is not a requirement.

Classes

Tween Returns a new Tween instance.

Timeline The Timeline class synchronizes multiple tweens and allows them to be controlled as a group.

Ease The Ease class provides a collection of easing functions for use with TweenJS. It does not use the standard 4 param easing signature. Instead it uses a single param which indicates the current linear ratio (0 to 1) of the tween.

Thanks

Special thanks to Robert Penner for his easing equations, which form the basis for the Ease class.

tweenjs's Issues

Make Tween.get multiple targets

It's nice to have multiple targets in Tween.get to reduce the number of lines in code:

var target_a = new createjs.Shape();
var target_b = new createjs.Shape();
var targets = [target_a, target_b];

createjs.Tween.get(targets, {loop:true}, true)
    .to({x: 300, y: 300}, 3000);

// also support the following:
createjs.Tween.get(target_a, {loop:true}, true)
    .to({x: 300, y: 300}, 3000);
createjs.Tween.get(target_b, {loop:true}, true)
    .to({x: 300, y: 300}, 3000);

setPaused(false) has unexpected result

Calling setPaused(false) on a tween that is running causes the tween to run at a faster speed. Further calls to setPaused(false) cause it run even faster.

I expected it to just ignore the call and continue to run normally since it is already unpaused.

var tween = createjs.Tween.get(something).to({y:0}, 30000);
tween.setPaused(false); // tween speeds up
tween.setPaused(false); // tween speeds up more

TypeError with _useTicks in minified TweenJS

I'm getting the following error (Chrome OSX) with minified tween.js. easel.j and preload.js are also being loaded.

Uncaught TypeError: Cannot read property '_useTicks' of undefined tweenjs-0.2.0.min.js:12
b.tick tweenjs-0.2.0.min.js:12
c._tick easeljs-0.4.2.min.js:16
c._handleTimeout

It happens intermittently but probably 1 in 5 loads. Any ideas?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of CreateJS/TweenJS!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library CreateJS/TweenJS is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "CreateJS/TweenJS",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Stage mouse up not being called

With the following code:

stage.onMouseDown = myOnMouseDown;
stage.onMouseUp = myOnMouseUp;

function myOnMouseDown(e) {
console.log("down");
}

    function myOnMouseUp(e) {
        console.log("up");
    }

"myOnMouseUp" is never fired.

Tween.get() takes extra pluginData param vs.Tween()

Tween = function(target, props) {...
Tween.get = function(target, props, pluginData) {
    return new Tween(target, props, pluginData);
}

Is pluginData obsolete as it is not documented in the JSDoc comment?
-Michael

TweenJS TypeScript definitions missing

The TweenJS link in definitely typed https://github.com/borisyankov/DefinitelyTyped goes back to createjs.com, where are the d.ts for TweenJS?

Complete event or similar on Timeline

If possible, it would be handy to be able to get an event when a Timeline has completed all its tweens.

How can I use milliseconds in tween when I add MovieClip to stage?

Hi,

I need to use milliseconds in animations in my movie clips.
I try to pass { useTicks: false } param to get method of Tween object but it's not working.

I want to use milliseconds instead of 40 ticks.
How can I do it?

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", stage);

var mc = new createjs.MovieClip(null, 0, true);
stage.addChild(mc);

var shape= new createjs.Shape(new createjs.Graphics().beginFill("#999999").drawCircle(100, 100, 100));
mc.timeline.addTween(createjs.Tween.get(shape).to({x:0}).to({x:760}, 40).to({x:0}, 40));

mc.gotoAndPlay(0);

Tweenjs.NEXT does not run on safari on a mac.

I get a type error when running in safari on a mac.

Text Performance

I am building an app which renders polaroid like objects, which contain some text in the bottom blank part of the polaroid, to the screen and then tweening them to a new location on the screen with some scaling and rotation.

I implemented this by making a canvas the size of the screen and then I create 2 image bitmaps, 2 text objects, and a shape object and put them all inside a container. I then tween on that container. My tween FPS is set to 60.

My target hardware is a minimized linux os on a flash memory card with very low specs so performance is a major concern for my design, but I am developing and initially testing on my laptop which is substantially more powerful, and all mentions to poor performance are based on tests on my laptop.

I noticed major performance slow down when I was tweeing just 3 of these objects at a time. I did a lot of testing and deduction and found that it was the text objects that were causing the slow down.

I was able to very smoothly tween 50 containers all with 2 image bitmaps and a shape object inside with no problem, but when trying just 50 text objects, with and without the container, it ground to a halt.

I took out the scale and the text performed much better, though still not as good as the whole polaroid while scaling and rotating, minus text of course. So it appears that scaling text causes a major performance hit.

I was wondering if you knew of this performance hit/had any tips for how to work around it.

Usability: tell that something is missing...

How about adding a small message in the console if one of the dependencies are missing for doing simple Tweens? I added the minified TweenJS class and thought I was ready to go. Without dependencies, it did nothing. A tiny note in the console (or an error even) would be helpful.

Delayed Call order is backwards?

Hi, if i set a bunch of delayed called, they appear to return in the incorrect order:

p.loop = function () {
for (var i = 0; i < 10; i ++) {
    // override can be true or false
    createjs.Tween.get( {}, {override : false} )
        .wait(  1000 )
        .call( this.printID, [ i ], this )
    }
}

p.printID = function ( id ) {
    console.log( id )
}

This then outputs:

9
8
7
6
5
4
3
2
1
0

This is wrong right? First in should be first out.

If I were to use TweenMax with the following code:

TweenMax.delayedCall( 1.0, this.printID, [ i ], this );

the results would be:

0
1
2
3
etc...

Please make it clear that this is different than sole/tween.js

This repository and project should clarify that it is NOT sole/tween.js, which was already very popular by the time this library came out. The homonymy is just confusing and misleading.

example giving error

The example shown is:

var tween = createjs.Tween.get(myTarget).to({x:300},400).set({label:"hello!"}).wait(500).to({alpha:0,visible:false},1000).call(onComplete);

although i get a script error at the "{x:300},400" saying "invalid amount of parameters, expecting 3"

CSSPlugin.js does not take all css styles into account

The "CSSplugin.js" uses element.style instead of getComputedStyle(). This prevents it from handling predefined css attributes correctly (e.g. predefined values from a css file are ignored). Also float values are not converted correctly because of parseInt().

Here is a quick fix:

/**
 * @method init
 * @protected
 * @static
 **/
CSSPlugin.init = function(tween, prop, value) {
    var sfx0,sfx1,map = CSSPlugin.cssSuffixMap;
    var style = CSSPlugin.getComputedStyle(tween.target, prop);
    if ((sfx0 = map[prop]) == null || !style) { return value; }
    var str = style;
    if (!str) { return 0; } // no style set.
    var i = str.length-sfx0.length;
    if ((sfx1 = str.substr(i)) != sfx0) {
        throw("CSSPlugin Error: Suffixes do not match. ("+sfx0+":"+sfx1+")");
    } else {
        if( str.indexOf('.') < 0 )
            return parseInt(str.substr(0,i));
        else
            return parseFloat(str.substr(0,i));
    }
}

/**
 * @method getComputedStyle
 * @protected
 * @static
 **/
CSSPlugin.getComputedStyle = function(target, prop) {
    if(!window.getComputedStyle){
        if(document.defaultView && document.defaultView.getComputedStyle){
            return document.defaultView.getComputedStyle.getPropertyValue(prop);
        }
        else{
            var camelCasedCssProperty = prop.replace(/-([a-z])/g, function (g) { return g.charAt(1).toUpperCase() });
            if(target.currentStyle){
                return target.currentStyle(camelCasedCssProperty);
            }
            else{
                return target.style[camelCasedCssProperty];
            }
        }
    }
    else{
        return window.getComputedStyle(target).getPropertyValue(prop);
    }
}

how to not create multiple rAF callbacks?

So I'm trying to integrate TweenJS into a team project. My PR is getting rejected because TweenJS creates multiple rAF callbacks per frame, as opposed to one single rAF callback per frame. I was wondering if that use case is supported? I think the useTicks options and tick method would do it, but it doesn't seem to animate correctly? I couldn't find any examples of how I might support that use case (but would be happy to send a PR with a new example once I figure it out). Is it possible for me to disable the Ticker class from creating multiple rAF calls, and instead be able to pass the time delta from my single rAF callback into a tween instance?

Tween.removeAllTweens chokes on Timelines

Timelines don't have a target, so they cause an error when using removeAllTweens.

Document needs update.

This document has a link to spark table demo which is point to http://www.createjs.com/#!/Demos/TweenJS/Spark-Table but it should be http://www.createjs.com/Demos/TweenJS/Tween_SparkTable in order to get to that demo.

'override' property a bit problematic for haXers

the optional 'override' keyword for the Tween.get properties object causes some issues when using haXe (reserved word), making using TweenJS there a little clunky

may i suggest 'overwrite'?

Tweens "elapsed" time isn't calculated right in NEXT

It seems like the latest changes to TweenJS (or possibly Ticker) have caused some issues with all tweens. Tweens started on document load run fine, but the time that Tweens use seems to be when the document loads, and not when the tween starts - so if the tween kicks off 1 second after document load, it will jump to 1 second into the tween immediately.

This example attached shows the issue with the latest NEXT source as of Nov 20, 2014

createjs.Tween.get({right:0}).to({right: 500}, 3000).on("change", function(e) {
    console.log(e.target.target.right); // Outputs the
});

Bad bower install

Don't know why but when I do a bower install TweenJS I get a malformed .bower.json:

{
  "name": "tween.js",
  "homepage": "https://github.com/tweenjs/tween.js",
  "authors": [
    "Sole",
    "Andrej Zachar"
  ],
  "description": "Super simple, fast and easy to use tweening engine which incorporates optimised Robert Penner's equations.",
  "main": "src/Tween.js",
  "moduleType": [
    "node"
  ],
  "keywords": [
    "tween",
    "interpolation"
  ],
  "license": "MIT",
  "ignore": [
    "node_modules",
    "bower_components",
    "test",
    "assets",
    "docs",
    "examples",
    "utils",
    ".*"
  ],
  "_release": "38f6eb2a80",
  "_resolution": {
    "type": "branch",
    "branch": "master",
    "commit": "38f6eb2a8081959d2958a8f6e37f6d107db211e9"
  },
  "_source": "git://github.com/sole/tween.js.git",
  "_target": "*"
}99ffc8caf68e6dda0dfa92e6593e5b3c3bab8488"
  },
  "_source": "git://github.com/CreateJS/TweenJS.git",
  "_target": "~0.6.1"
}

Tweening HTML elements

It would be a nice feature to tween HTML elements also.

"TWEEN is undefined"

When I try to reference the TWEEN class in my code, I get an "Uncaught ReferenceError" saying that TWEEN is undefined. I have used the TweenJS CDN, the CreateJS CDN, the minified and the unminified file locally, and searched through countless examples to try and find out where I am going wrong. The line I get the error on is:

var tween = new TWEEN.Tween(location);

When I use the CreateJS CDN, the browser has no trouble with "new createjs...", but I just cannot get TweenJS to work.

Tweenjs site

The TweenJS site shows 403 Forbidden error

Request: Build Filename Without Version Number

Would it be possible to please remove the version number from the concatenated library file names (e.g., "tweenjs-0.6.1.min.js" becomes "tweenjs.min.js")? This is not particularly helpful and creates manual annoyances when upgrading to newer versions of the library. Bower is the preferred method for managing dependency versions and feel that file name versioning is unnecessary and redundant. What's the rationale for this choice?

Safari viewport

Hi

I made some animations with Tween JS in canvas, all running smoothly in Chrome and FF on a mac.

In Safari however, when a part of the canvas gets clipped outside of the viewport, the animation starts staggering and becomes really slow.

Did anyone expercience this before? Oh yes, the canvas is really big, about 2500px in width.

Thanks

how to move backwards

I have a shape I have moved on the x axis from 0 to 20. How do i move it backwards? i.e.move it on the x axis from 20 to 0.

pause method doc confused

TweenJS Doc section of method pause:

http://www.createjs.com/Docs/TweenJS/classes/Tween.html#method_pause

Parameters:

- tween Tween
The tween to play. If null, it pauses this tween.

Should play be ?

The tween to pause....

Just confused. Thanks.

Strange pause at the end of a loop

Hi guys,

I created a SO Question with a JSFiddle, but got no useful response (one answer deleted by the author after realising that the wait(100) calls in my code make sense.)

Here is my question: http://stackoverflow.com/questions/10307411/pause-after-loop-in-tweenjs

I basically create a loop with a number of waits, but at the end of the loop there is an even longer wait, I didn't create, which I'd like to get rid of somehow. If there is no default wait at the end of a looping tween, this might be a bug in tweenjs.

Thanks!
Rainer

validate

in this line:

MotionGuidePlugin.calc = function(data, ratio, target) {
        if(data._segments == undefined){ MotionGuidePlugin.validate(data); }

I can't found function 'validate' in MotionGuidePlugin object.

API to check for active tweens

Please add an API that would allow a client script to check whether there are any active Tween objects. I had to use an undocumented Tween._tweens property in my code to work around this limitation:

function tick(delta)
 {
    if (Tween._tweens && Tween._tweens.length > 0)
    {
        Tween.tick(delta);
        _update = true;
    }
    if (_update)
    {
        _stage.update();
        _update = false;
    }
 }

Add var to tween variable

Looks like this line should have a var declaration in front?

https://github.com/CreateJS/TweenJS/blob/master/src/tweenjs/Timeline.js#L285
tween = this._tweens[i];

Thanks
-Michael

Timeline.addTweenAt

This is unnecessary for the vast majority of tweens, but could be helpful for the rare case where people are trying to add custom content into exported MovieClip elements at runtime.

See:
http://community.createjs.com/discussions/tweenjs/563-timelineaddtween-problems

Tween the stroke of a circle

Is there a way to:

var circle = new createjs.Shape();
circle.graphics.setStrokeStyle(12);

createjs.Tween.get(circle, {override: true})
                        .to({
                            setStrokeStyle: 5
                        }, 2000, createjs.Ease.bounceOut)

I want to change the thickness of the circle.

Runs only in Firefox local (not working on server)

Hello, i have an issue with Firefox. The demos (createJS) and local testing works well. For some reason it doesn't work from server (online).

I don't have this problem on other browsers, even when the files are on the server.

test page:
http://getont.de/intro/index.html

It would be nice if somebody can help!

Eika

Add getter / setters.

We should add appropriate getter / setters to TweenJS to bring it in line with the other libraries.

Ex. Tween.paused, Timeline.paused, Tween.position(?), etc.

Timeline '_updateTimeline' related issue.

Hello there!

I believe I have unearthed a bug/design flaw that boils down to a few things. I came across this issue firstly when I needed to dynamically remove a MovieClip's child created via Toolkit.

It turns out that MovieClips that exist within another MovieClip's timeline don't actually have any parents until the following frame when _updateTimeline is called.

console.log(someMC.parent);    // Returns null
someParentMC._updateTimeline();
console.log(someMC.parent);    // Returns someParentMC

The issue came about again when a colleague asked me for help regarding an issue he was having when a MovieClip wasn't changing frame despite him calling gotoAndStop();

The problem turned out to be the MovieClip's parent had more than 1 frame which lead to different code generation via Toolkit. MovieClips with a single frame simply use addChild(), where as MovieClips with multiple frames use timeline.addTween().

The latter leads to the above issue where _updateTimeline() has not been called until the following frame at which point the frames actually exist.

As shown above in the sample code, calling _updateTimeline() prematurely resolves the issue but this method is essentially protected and more importantly highlights the lack of addedToStage/removedFromStage event dispatching that would be used in AS3.

You are obviously waiting for the next frame to initialise a MovieClips timeline because you can't do it in the constructer. I feel addedToStage/removedFromStage functionality would be helpful in this situation, although its not 100% ideal because you would still have to add the parent to the display list before its timeline was initialised but it would still be better than waiting for the next frame.

In general, I think addedToStage/removedFromStage would be a great addition to DisplayObject.

Please let me know what you think of my findings, is this a bug or a design oversight, maybe _updateTimeline() should be considered public and documented?

Thanks for your time!

bug duration=0

tw = createjs.Tween.get(circle,{loop:false, onChange: function(){
console.log(tw.position);
}}).to({x:300,y:0},1000,createjs.Ease.bounceOut) // tween to scaleX/Y of 1 with ease bounce out
.call(function(){
setTimeout(function(){
//doesn't run
tw.to({y: 10}, 0).setPaused(false).call(function(){
console.log('finish 0')
});
},500);
});

http://jsfiddle.net/im007boy/6uRMY/5/

Browser support?

Hi guys,

which browsers are not supported by TweenJS?

[Tween.to] Is it possible to use "width" as a props element ?

Hi guys,

I'm trying to animate a rectangle by his width element but it looks like its not implemented yet. Am i missing something ?

Here is my test

var leftHpRect = new createjs.Shape();
leftHpRect.graphics.setStrokeStyle(1)
.beginStroke("#f6f306")
.beginLinearGradientFill(["#fffc00","#cac81d"], [0.4, 0.6], 0, 0, 0, 18)
.drawRoundRectComplex(0, 0, 0, 12, 0, 2, 2, 0);
createjs.Tween.get(leftHpRect).to( {width:500}, 1500, createjs.Ease.linear);


The purpose was to animate this rect from 0px to 500px in width. I have tried to use scaleX as a workaround but sadly it breaks the gradientFill.

Please, let me know if it possible with TweenJs or should i implemented my own solution ?

Sorry for my english.

What is the relationship between TweenJS and EaselJS?

Unminified version

I really think unminified version of the entire TweenJS must be kept in the repo. It is super convenient to have an unminified for those who cannot go through the grunt process and create their own. It makes the life of developer easier as well if they want to quickly check things.

tweenjs must be included after easeljs

I found that if I have the following javascript include in my html header:

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="js/main.js"></script>

TweenJS will not work. It silently fails and and I don't know why. If I switch the order of easeljs and tweenjs above, everything works as expected.

Tween not firing when canvas is replaced

I am adding and removing a html canvas element in an ajax application. When a new canvas is removed and added, I set the CreateJS stage to the new canvas.

So far it works, but my Tween is not firing any more.
When adding an onchange handler to the tween, that doesn't fire either.

I can't figure out if the tween is broken, or is the tween still rendering to the old canvas?
I have created a fiddle here:

http://jsfiddle.net/BUyyv/2/

var keyword missing

please make Tween be a local variable:
https://github.com/gskinner/TweenJS/blob/master/src/tweenjs/Tween.js#L44

n00b frustrated with TweenJS

My frustrations (v0.4.0):

• createjs.Tween.get(obj).set(props) doesn't actually set the props

• Why can't I do this:

  t1.play(); // doesn't work

  instead of this:

  t1.setPaused(false); // works

• The manual says don't cache() a Bitmap, but that's the only way I am able to apply a Filter to it.

• The manual says that props is a required parameter in get(), but that's not the case.

Am I just being dense or do others share my frustrations?

Motion guide orientation changed behavior

I just updated from EaselJS 0.6.0 and TweenJS 0.4.1 to 0.7.1 and 0.5.1 respectively. Now I have a tween along motion guide, and 'orient' property set to 'auto'. After upgrade, the animated shape stopped orienting itself to the path. Tracing rotation property shows that the values are different after upgrade and the effect seems to be broken. Nothing changed but the libs version.

Here's jsbin with old libs: http://jsbin.com/pilidodohoki/1/edit?html,js,output

And new ones: http://jsbin.com/vezohaqopuxe/4/edit?html,js,output - you can see that the recatngle rotates a bit but is not really oriented along the path anymore.

Should it work that way? How can I get the old behavior?

Enable Sourcegraph

I want to use Sourcegraph code search and code review with TweenJS. A project maintainer needs to enable it to set up a webhook so the code is up-to-date there.

Could you please enable TweenJS on @sourcegraph by going to https://sourcegraph.com/github.com/CreateJS/TweenJS and clicking on Settings? (It should only take 15 seconds.)

Thank you!

Timeline.prototype.resolve() validation fails for frame labels beginning with numeric

resolve() isn't handling frame labels with a leading numeric correctly. If I created a label on frame 10 called "99RedBaloons" and then later do gotoAndPlay("99RedBaloons"); this function would return 99 as opposed to 10. Casting the contents of positionOrLabel using Number() as opposed to parseFloat() will produce more consistent results.

For more on parseFloat vs Number, see https://stackoverflow.com/questions/12227594/which-is-better-numberx-or-parsefloatx