Switching over from KineticJS, cannot make it work on canvas

[Nieszka]

Hi!

I'm doing my final year project using html5 canvas and was using KineticJS for all my tweening (back when it was using a transformTo function). When they recommended switching to GreenSock I was all up for it (from what I can see of the examples it really is an amazing platform), however I cannot make it work on my canvas at all!

 

At first I thought it might be due to some underlying problems in my own code so I set up a smaller example with just a canvas, a kinetic stage,layer and one shape that I'm trying to animate, and still no luck. -> http://jsfiddle.net/nieszka/Z7ABH/

I'm thinking I must be missing something really obvious because I can't see anyone reporting any problems. Any help would be hugely appreciated. I know I could always roll back to the older version of Kinetic, but GSAP just seems so much better. 

 

[jamiejefferson]

The TweenMax file includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin
 
For tweening KineticJS objects, you also need to include KineticPlugin in your page. It's included in the plugins folder from the zip download, and is available on the CDN at

//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/KineticPlugin.min.js

 

(Jack/Carl - KineticPlugin isn't on the customize download page, and there isn't a page for it in the API)

[Carl]

Yes, we don't have any KineticPlugin documentation currently, but I'd like to clarify a few things.

 

1) You don't need to use KineticPlugin, but it makes a lot of sense. This will work without KineticPlugin:

TweenLite.to(creature, 5, {setX:500, setY:200, setRotationDeg:360, onUpdate:layer.draw, onUpdateScope:layer});

demo:

See the Pen 7f66b43f6759840a8be3f0999ed9d6ee by GreenSock (@GreenSock) on CodePen

 

Without KineticPlugin you have add onUpdates to all your tweens to draw() the appropriate layer OR use the TweenLite.ticker to redraw the entire stage. 

 

The KineticPlugin offers a number of conveniences

 

• It automatically calls draw() on the layer for which the target of your tween belongs and the plugin has logic built in so that it only calls draw once per frame. So if you have 500 objects animating on a layer at the same time, only 1 draw() call is made on that layer.
• You don't have to use the method names of KineticJS like setX, setY, setScale, setRotation etc, just use x, y, scale, rotation etc.
• Includes BezierPlugin support
• Amazing color tweening capabilities that allow you to tween from "red" to #0f0" or hsla() to rgb() (mix and match however you chose) on any Kinetic Object property that takes a color as a value.
• Has built in support for DirectionalRotation

Here is a very basic tween with the KineticPlugin enabled

//remember to wrap your propertis in a kinetic object
TweenLite.to(creature, 5, {kinetic:{x:500, y:200, rotation:360}});

See the Pen 6fffd7d89ac367987c6e3b41ac2fdf72 by GreenSock (@GreenSock) on CodePen

[Praney Behl]

That's a great post Carl, KineticJS was spinning my head around for the whole day until I found this post.

 

I have a couple of questions relating to this thread so I think I will just ask here as it would be easier for others looking for help in similar area.

 

1. How can we animate kinetic object on a timeline? What I mean by that is how to make the kinetic objects show up at different times on the timeline and make them disappear once done. To be make specific - on demand?

 

2. Is it possible to use css plugin on Kinetic objects? If so, then is there an example?

 

3. Is it possible to get an example of a full blown timeline sequence animation like here: http://www.greensock.com/css3/ ?

 

I am amazed by the power of GSAP so far. Just going through the learning curve and I am sure it will be worth it.

 

I would really appreciate your help.

 

Thanks,

Praney

[Carl]

1. How can we animate kinetic object on a timeline? What I mean by that is how to make the kinetic objects show up at different times on the timeline and make them disappear once done. To be make specific - on demand?

 

The TimelineLite API behaves exactly the same way when using DOM / CSS animations or KineticJS / canvas animations. If you understand the basics of TimelineLite and TimelineMax it should be very easy to use those tools with tweens that use KineticPlugin.

I made a basic demo for you here: 

 

http://codepen.io/GreenSock/pen/dLFfk

 

If you need a little crash course on the TimelineLite methods watch this video: http://www.greensock.com/sequence-video/

 

2. Is it possible to use css plugin on Kinetic objects? If so, then is there an example?

 

Nope. Kinetic objects are JavaScript objects, they don't have CSS properties. You will have to stick to the methods available in the KineticJS API that allow you to modify properties of Kinetic objects. (ofcourse our KineticPlugin offers a few conveniences like allowing you to tween x instead of setX).

 

3. Is it possible to get an example of a full blown timeline sequence animation like here: http://www.greensock.com/css3/ ?

 

Please see question #1 Unfortunately that's all I can do right now. Hopefully more developers will see the power of the GSAP and KineticJS marriage and we'll be able to showcase more impressive demos. 

[Praney Behl]

Thank you Carl, you're a legend I have just purchased the Business Green membership and ready to get my hands dirty now that I see that GSAP is the perfect mix I have been looking for.

 

Big +1 and thanks to you.

 

Cheers!

Praney