createjs / tweenjs Goto Github PK

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/

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

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?

Hi guys,

which browsers are not supported by TweenJS?

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

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!

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

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

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

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.

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.

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

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.

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;
    }
 }

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);

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'?

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?

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

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/

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.

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);
    }
}

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

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.

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.

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
});

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?

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!

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.

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...

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.

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.

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

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);

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

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.

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"

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!

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

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

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.

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.

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

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.

The TweenJS site shows 403 Forbidden error

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"
}

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.

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?

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

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?