Jump to content


Changing Kinetic sprite on tween finish.

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'm trying to get a Kinetic sprite to change it's animation after the tween it's attached to stops.  As of now the sprite changes when the tween starts.  Would this just be a callBack function?  I know how to do this with pure Kinetic, however, I'm using the KineticJS plugin for the controls.  I have my code included in a text file and the area I'm refering to is highlighted.  Anyone have some suggestions?


Link to comment
Share on other sites

Are you just asking how to call a function when a tween completes? If so, you can use an onComplete, like this (excerpt from your code with onComplete added):

tl.to(line, 5, {kinetic:{points: [50, 100, 50, 250], stroke: 'red'}, ease:Power4.easeOut,     onComplete:function() {
        console.log("do stuff");

If you're still having trouble, please create a codepen that demonstrates the issue so that we can take a peek in context (just sending your JS isn't as helpful as seeing it in context with your HTML and CSS).

  • Like 1
Link to comment
Share on other sites

So this worked, I knew it was probably something like this.  However, the sprite isn't animating the way it needs to.  The DOM is accepting the change, however, it's not visually changing.  I have a console.log that prints the sprite's state and it's showing the change in the console, but not on the page.  Any ideas as to why it would be doing this?

Link to comment
Share on other sites

Sounds like maybe you aren't calling draw() after you are updating some properties of a Kinetic object.  When animating with GSAP and the KineticPlugin, the plugin automatically calls draw() on the parent Layer of the target of the tween. 


Perhaps you have to do that yourself in your custom callback.


Regardless, here is a demo you can fork that already loads TweenMax, KineticJS 5 and our Kinetic plugin:




Just remove the existing code and add enough to simulate your problem.


If you need help understanding how CodePen works, just watch this video:


  • Like 1
Link to comment
Share on other sites

That's exactly what it was.  I actually figured that out right after I posted my question.

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.