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.

Answer 1

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

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