Tween.js not callling call function after adding EventListener

Question

I am using tween.0.6.2 and ran into a problem.

Follwing code snippet (taken from the tween.js Getting Started site and slightly simplified) works just like it should:

            createjs.Tween.get(circle)
                .to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
                .call(function() {console.log("tween finished");});

After the tween has been finished (the circle has been moved to x=400) the function passed to call is executed.

But after an event handler was added like so:

            createjs.Tween.get(circle)
                .to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
                .addEventListener("change", function() {console.log("tween changed");} )
                .call(function() {console.log("tween finished");});

the function passed to call is not executed anymore.

Any ideas ?

Answer 1

For everyone stumbling over this: after some experimenting, I found out that this works:

           createjs.Tween.get(circle)
                .to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
                .call(function() {console.log("tween finished");})
                .addEventListener("change", function() {console.log("tween changed");} )

As it seems, the call to call must precede the call to addEventListener .

EDIT:

Still not working the way it is expected to: in the above example, the event listener gets called one more time after(!) the function passed to call is executed.

Ideas as to why this is happening are still welcome ...

Answer 2

addEventListener is not tween-js function. All chained functions like to and call assuming to return this object (instance of Tween) and addEventListener returns undefined . So, last call() will called upon undefined .

You must use onUpdate instead of addEventListener :

         createjs.Tween.get(circle)
                .to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
                .onUpdate(function() {console.log("tween changed");} )
                .call(function() {console.log("tween finished");});