Jump to content
Search Community

KineticJS Plugin and Value Arrays

IridiumEagle test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I was wondering if the kinetic plugin wrapper worked for value arrays passed to the 'bezier' function.


So far, I have tried variations on this:

TweenMax.to(circle3, 5, {bezier:{type:"soft", kinetic : {values:[{x:100, y:250}, {x:300, y:0}, {x:500, y:400}]}, autoRotate:true}, ease:Power1.easeInOut});

but am getting syntax errors.


Perhaps a bit more cluelessly I tried

var myObject = new Array();
myObject.push(kinetic:{x:100, y:250});
myObject.push(kinetic:{x:300, y:0});
myObject.push(kinetic:{x:500, y:400});

Until I realized that kinetic is just a property recognized by a particular set of functions.


What would be the best way to :

a) Wrap the array of kinetic properties

B) Dynamically add kinetic properties to an array of such



I should mention that :

 TweenMax.to(circle3, 5, {bezier:{type:"soft", values:[{setX:100, setY:250}, {setX:300, setY:0}, {setX:500, setY:400}], autoRotate:true}, onUpdate:drawLayer, ease:Power1.easeInOut});

works, but I wasn't sure if the drawLayer call would add some inefficiency to the animation pipeline compared to the Kinetic JS Wrapper.

Thanks so much for your help. I bought a perpetual developer license to show my support. Keep up the great work.




Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Special thanks for supporting us with your license purchase.


Take a look at this codepen example here:




It uses the KineticPlugin and a bezier tween. 


The trick is that all the Bezier information must be wrapped in a kinetic object


var bezTween = new TweenMax(creature, 6, {
  kinetic: {
    bezier: {
      type: "soft",
      values:  [{x:150,  y:300}, {x:300, y:-10}, {x:500, y:320}, {x:650, y:320}, {x:900, y:100}, {x:1100, y:500}],
      autoRotate: ["setX", "setY", "setRotationDeg"]
  ease: Linear.easeNone

Let us know if you need more help.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...