KineticJS and Tween Timelines, integrating with GSAP JS

Question

as of version 4.5.1 the old Transition class has been retired and "KineticJS recommends the GreenSock Animation Platform which integrates seamlessly".

I am writing a canvas game using KineticJS which relied quite heavily on that old Transition class but having read up on GSAP's abilities I'm quite keen to upgrade.

My problem is that when I try using even the simplest TweenLite functions they are completely ignored by my canvas. I'm guessing I must be missing something obvious because I haven't seen anyone else reporting problems.

Does anyone know how to get TweenLite and TimelineLite to work with Kinetic? Any help would be greatly appreciated!

(I'll include code samples below of what I currently have).

   //Basic Kinetic setup: 

var stage = new Kinetic.Stage({
    container: 'container',
    width: 800,
    height: 600
  });

var layer1 = new Kinetic.Layer();

layer1.add(levelOne);
              .
              .
    //The KineticJS shape I'm trying to tween   

    var stone3 = new Kinetic.Circle({
        x: 664,
        y: 528,
        radius: 10,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });

              .
              .

     var levelOne = new Kinetic.Group();
     levelOne.add(stone3);

              .
              .

     TweenLite.to(stone3, 2, {top:"300"});  //has absolutely no effect

I'm using

 <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

to import GSAP.

Aren't `canvas` objects referenced by `x` and `y` coordinates rather than `top` and `left` ? — ahren, May 27 '13 at 12:29

score 2 · Answer 1 · answered May 29 '13 at 10:01

2

The GSAP trasitions never worked really for me as well. As Eric has pushed the new Kinetic.Tween-class with version 4.5.2 (4.5.1 had them as well, but tweens on stage were not possible) of KineticJS, I would recommend using this class for simple transitions.

Example for your stone3-shape with the Kinetic.Tween-class:

new Kinetic.Tween({
        node: stone3,
        y: 300,
        /* Eventual easings
        *  duration: 0.5,
        *  easing: Kinetic.Easings.EaseInOut
        */
}).play();

answered May 29 '13 at 10:01

irie

472
5
12

I tried that but then I had the problem of the tween only playing once (say if it was triggered by a mouse up in a specific canvas area it would play the first time but when I clicked there again it didn't show the whole transition, just the end position) so that doesn't seem to be working either :( – bamboo10 May 29 '13 at 21:55
Could you post a jsFiddle of your code with the Kinetic.Tween-class, because the behaviour of not showing the transition is certainly not normal and it would be easier to help you... – irie May 30 '13 at 06:06

user1283078 · Accepted Answer · 2013-10-19T13:31:03.493

question is a bit old, but as i just had the same problem. the answer is simple. gasp supports methods and properties. it will automatically determine what to use:

To manipulate a kineticjs object just tell it what setter to use, and don't forget to draw the object. you could use the onUpdate callback for that:

TweenLite.to(obj, 2 { setX : 300
                      onUpdate : function () {
                                    obj.getLayer().draw(); }})

KineticJS and Tween Timelines, integrating with GSAP JS

2 Answers2

Linked