Jump to content
Search Community

Box2D with TweenLite

kcrik 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

It's my first time posting here, so apology if it's not done correctly.

I have a problem. I have a game where I interpolate, via TweenLite, the position of a sprite. I interpolate the position of its box2D body to be precise.

Even though the tweening in itself works fine, once I kill the tween, it puts back my object at its initial position and I can't figure out why.
I am sure it's something stupid, like a param to pass, but can't find it in the doc.

Maybe there are issues when tweening with box2D ?

Thanks for your help.


var fromX = ((BALL_SIZE * BALL_SCALE) / SCALE)
g_tween = TweenLite.fromTo(g_ball.sprite.body.GetPosition(), 3.0, {x:fromX}, {x:toX, ease:Linear.easeNone, onComplete:onTweenComplete, onReverseComplete:onReverseComplete});

function onTweenComplete() {
function onReverseComplete() {
// ***********
// Callback when user click on the screen
// The game release the ball if it hasn't been released yet
// ***********
function onMouseDown(event) {
        //var newBall = new Ball()
        var x = g_ball.sprite.body.GetPosition().x
        console.log("x: " + x)
        g_ball.sprite.body.GetPosition().x = x
        console.log("g_ball.sprite.body.GetPosition().x: " + g_ball.sprite.body.GetPosition().x)
        g_world.SetGravity(new box2d.b2Vec2(0, 30))
Link to comment
Share on other sites

Hello kcrik and Welcome to the GreenSock Forum!


You can see in the normal behavior of kill(). In the below codepen example you can see when you stop and kill the animation, the applied transform is still on the element style attribute, but the tween has been killed.


See the Pen xEvGaN by jonathan (@jonathan) on CodePen


Have you tried the various parameters for kill() method ?

.kill( vars:Object, target:Object )

Like just killing the x property of your tween.

//kill only the "x" property of the animation (all targets):

kill() : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/kill/


Other available kill methods:




I am not sure if this is an issue with box3d, since you say that the box returns to its default state?


If your still having an issue please create a codepen demo example so we can see your code in context



Thanks :)

Link to comment
Share on other sites

Thanks for the fast answer !!

I have managed to fix it in the end. I am not too sure why, but after the tween is killed, the object is put back at its original position. I suspect that the tween does its job every frame on the object at setting x directly.

However if you do that, it works on the frame you do it, but that's it.

I tried by forcing the setting of the position doing : g_ball.sprite.body.GetPosition().x = 2

I can see the ball blink at the position x = 2, but just for 1 frame. So my belief is that TweenLite updates each frame the x position that way. Because it does it every frame, it seemingly work, when in reality the physic engine will try to put the coordinates back to its origin.

So my solution is :

function onMouseDown(event) {


g_ball.sprite.body.SetPosition(new box2d.b2Vec2(x, g_ball.sprite.body.GetPosition().y))

g_world.SetGravity(new box2d.b2Vec2(0, 30))

This way I set the position in the physic world on the latest coordinates set by The tween, which are correct :-)

I think box2D isn't too great with TweenLite.

Any way, it might help some people who have the same issue :-)

Link to comment
Share on other sites

Glad you got it working.


You can also use the GSAP set() method, which is a zero based tween


TweenLite.set(g_ball.sprite.body.GetPosition(), {x: 2});


set(): https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/


You want to be careful about changing properties outside of GSAP so it can keep track of the values, in your case for transform x property


Happy Tweening!

  • 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.
  • Create New...