Jump to content
Search Community

Bounce against the wall using Tweens

poulaing test
Moderator Tag

Recommended Posts



I was using x and y properties to make a ball move on a straight line. When hitting a wall (eg. x + xSpeed < 0), I just inverted the xSpeed and the ySpeed values.


Now, I want to switch to GSAP so I can get onComplete callbacks. I can easily detect when the ball goes out of the bounds, but how can I set a new tween to send the ball on the right direction, with the right x, y, duration and tween ease?


Thanks a lot for your help!

Link to comment
Share on other sites

Is this what you're looking for?:



Notice there's some commented-out code that you can uncomment to see a more advanced effect that's made possible by some tools we'll be releasing soon. :)


There are other ways to do this like with the ModifiersPlugin, so let us know if the simple bounce isn't what you were looking for. 

Link to comment
Share on other sites

Actually, I need to calculate the bounce manually. I do not want to create a physics engine, just that bouncing thing. Here's a picture to illustrate that:




So I launch Tween1 because I know the direction and the power of the ball. Then, when the ball hits a wall, I need to create a new tween with new parameters. In that case, I would mainly want to change the y progress to set Tween 2.


Is that doable by getting Tween1 values when the ball hits the wall?


Thanks for the help!

Link to comment
Share on other sites

Absolutely. There are many, many ways to do this sort of thing, but it's a little difficult for me to answer you without seeing the context you're working in. Do you have a reduced test case in codepen or jsfiddle maybe? Even if it's just tween1 - I want to see how you're structuring things or else I risk giving you another answer like my previous one that I thought addressed your concern but totally didn't because I didn't understand the context or the specific goal. 


Curious: why are you doing any hit detection at all instead of just animating to the wall and sequencing another tween upon completion, etc.? 


Also curious: are you familiar with the ModifiersPlugin? http://greensock.com/docs/#/HTML5/GSAP/Plugins/ModifiersPlugin/

Link to comment
Share on other sites

Thanks for the links! Actually, I found an example of what I want to do precisely:

See the Pen oXKmNO by osublake (@osublake) on CodePen

I want my ball to react the same way the square does on that example, without the dragging and the resize of the container. I don't do javascript, so I don't get the code at the moment, I will try to get deeper into this.

Link to comment
Share on other sites

Here's a demo that I whipped together for you that leverages ModifiersPlugin to do the bouncing:



So you can animate x/y to any values you want, way beyond the boundaries, and it'll just modify things on-the-fly to keep x/y inside the ranges you specify and do all the bouncing. All the heavy lifting is done inside that modifier function which you can reuse as much as you want. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

I completely missed the fact that you posted this in the Flash forum, not HTML/JS. Sorry about that. There is no ModifiersPlugin for ActionScript, but you could probably adapt the demo for use in ActionScript and just tap into an onUpdate to modify the values. Unfortunately, we don't actively support the ActionScript tools anymore since almost everyone shifted to HTML5/JS a few years back and made it clear that that's where they wanted us to focus our energy. Anyway, hopefully the concepts demonstrated in the demo are helpful. 

  • Like 1
Link to comment
Share on other sites

  • 5 years later...

Hello @GreenSock,

I am wondering how to create this effect that you posted a while back :

See the Pen ?editors=0010 by GreenSock (@GreenSock) on CodePen

In order to use it with Draggable and the Inertia Plugin. Here's my codepen :

See the Pen NWwwmRe by MaxVeilleuxMTL (@MaxVeilleuxMTL) on CodePen

Right now I am faking a bounce back to x:100, y:100... But I would like it to bounce off the wall with the correct velocity and to the correct end position, like we can see in your example.

Thanks a lot :)

Link to comment
Share on other sites

The updated GSAP 3.x version of that demo is here: 

See the Pen RwjjOve?editors=0010 by GreenSock (@GreenSock) on CodePen


We don't typically provide custom solutions like you're asking for, but I was curious and converted it like this: 

See the Pen ZEaaNLy?editors=0010 by GreenSock (@GreenSock) on CodePen


You also might want to consider this one from @OSUblake from the docs: 

See the Pen vYWWwjq by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

@1-greensock Thanks a lot! 🤗
I spent 2 days trying to find the answer.
You also helped me a lot by providing a solution! 😊
I don't understand just one thing.
I set (repeat: -1,) the animation continues indefinitely.
But when the ball bounces back, it reappears at the spawn point and plays the animation again.
And how to make it so that it jumps indefinitely? Pushing away from the walls.
as in similar answers

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...