Jump to content


Animate Phaser sprite with TweenMax frame by frame

Go to solution Solved by Rodrigo,

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

Hi guys! Can I animate a sprite in Phaser with GSAP? I want to animate the sprite in the timeline because I want to be able to reverse it with everything else...


In Phaser I animate the sprite as follows:



var player = this.game.add.sprite(X, Y, 'player');
player.animations.add('walk', [0, 1, 2, 3, 4 ], 15, false); //the animation end in the frame 4

And I am using GSAP to tweening objects...

var tl = new TimelineLite();
tl.to(this.state1, 3, { x: -1000 });

I want to replace the sprite animation with Phaser to do this with GSAP, and to reverse this in the timeline animation with


Thanks in advance


PD: See please http://www.html5gamedevs.com/topic/8141-tween-atlas-frame-on-ipad/


Regards, Nicholls

Link to comment
Share on other sites

  • Solution

Hi Nicholls and welcome to the GreenSock forums.


Usually we don't support third party code (whether is an engine or plugin) and this looks like a Phaser issue. Mainly the idea would be to locate an object that records the sprite's current frame and tween that value and, as it has been mentioned in the game forum link you provided, using roundProps is a very good idea (the frame number is an integer so there's no need for any decimals).


I did a quick check on Phaser API and I found that the animation object has a frame property that acts as a getter/setter of the animation's current frame. So I'm going to presume that in your code animations is the animation object of player, so it could be like this:

var player = this.game.add.sprite(X,Y,'player');
// rest of your code

var tl = new TimelineLite();

tl.to(this.animations, 3, {frame:4, roundProps:"frame", ease:Linear.easeNone});

// then later on your code

Let us know how this goes and if you need more help, please try to set up a codepen sample so we can get a better look at it.



  • Like 5
Link to comment
Share on other sites

Hi Rodrigo!


Thanks for your help! This works perfect!  :mrgreen:  

See the Pen ZYeWEr by jdnichollsc (@jdnichollsc) on CodePen


Updated: I added a way to change the background color with GSAP in the timeline!  :shock:


Regards, Nicholls

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