Jump to content


Custom function in TimelineMax + KineticJS

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'm using GSAP's TimelineMax with Kinetic JS. I got them to work together, but I'm having trouble when I try to pass my own custom functions to the timeline. I've included a jsbin to show the issue.



The first part of the animation uses a standard Kinetic JS command and this plays fine.

tl.to(rect, 1, {setX:300});

The second part of the animation uses a custom function that I am adding to 'rect' and this is failing.

tl.to(rect, 1, {customSetX:100});

I tried to track this by publishing the value to the console and the issue is very strange - the value that's being passed to my function seems to be NaN. Now, the console.log gets printed a number of times, so I can tell that it's being called every frame. However, I can't figure out what's going on with the parameter. When I print (typeof val) it says number, but when I print the actual val, it says NaN. (You can click 'Play Anim' and open the console in JSBin to see this)


Can anyone help me understand why this is happening? (BTW, the reason I'm trying to add my own functions is because I need custom rotate and scaling code for my objects to transform around a pivot point rather than Kinetic's offset.)

Link to comment
Share on other sites

Hmm my guess is that it's because GSAP requires both a getter and setter to tween values, and the automatic getter/setter detection uses a setName() / getName() pattern.
Try changing customSetX() to setCustomX() (and make sure to have a getCustomX() as well) and it should work.

  • Like 1
Link to comment
Share on other sites

You, my friend, are an absolute genius! Thank you! That did it. I added a getter and renamed the functions and it works now. Thank you!!


I've updated the JSBin for anyone else who stumbles across this post.


  • Like 1
Link to comment
Share on other sites

Also for the record, you can use a single function as both a getter AND setter and it'll work fine with GSAP. When no value is passed to the method, it acts as a getter, otherwise it acts as a setter. jQuery uses this pattern quite a bit. For example:

rect.customSetX = function (val) {
  if (!arguments.length) {
    return this.getX(); //make sure this is a getter too! I'm not sure how you're keeping track of the custom value, but return it here. 

Or you can use Jamie's suggestion and break things into 2 functions, starting with "get" and "set".

  • Like 2
Link to comment
Share on other sites

Wait.. there was a plugin all along?! :D I mean.. uh.. yeah, I knew there was a plugin. I just wanted to do it the hard way. For some man points. Anyway, now that I've earned my man points, I'll use the plugin. Thanks :D


Jack, thanks for clarifying that. I think between all the answers in this post, I now understand the behavior better.

  • Like 1
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.