Jump to content
Search Community

object falling diagonally with bounce easing in correct direction?

jwave test
Moderator Tag

Go to solution Solved by jwave,

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

Am using gsap inside createjs/canvas


if I have a ball, for example, tweening in diagonally, from top left to bottom right, say, with an easing bounce when it hits the bottom of the canvas, the bounce goes up and down, as I want, but also bounces backwards towards the left, when what I want in this case is for the bounce to go to the right.


Is there a simple way to achieve that?



Link to comment
Share on other sites

hmm, not sure exactly what you need help with. 


Here is a basic CodePen that uses CreateJS export from HTML5. Perhaps you can add your code so that we can see what you are doing.


To be clear, GSAP doesn't do any hit detection so its not like your ball will automatically bounce of a wall when it hits it.

Link to comment
Share on other sites

I have put a pen at 

See the Pen zvQExN by jc34 (@jc34) on CodePen


As you can see it's pretty simple, I just want the bounce to continue to the right rather than going "backwards" to the left. I just wanted to know if there is a simple way to do that.


Interesting that you mention Flash CC as that is what I am working in. Doing a large number of education activities (converted from old swf versions) and gsap is proving invaluable.


Thanks for your replies.

Link to comment
Share on other sites

What I think he is after, guys, is the old ball bounce effect. I'll get a pen to show if I manage some downtime today. Hopefully, I will get some digital street cred here for being able to spot the answer, even though, I have a feeling that by the time I am done writing this, someone will have a pen with three examples (Blake, most probably or Diaco)

  • Like 3
Link to comment
Share on other sites

exactly, he (ie me) wants a bouncing ball effect with sideways motion and was wondering if it could be achieved by using the gsap bounce effect which by default bounces back in the direction it came, which is not what you want for a bouncing ball type effect as it should continue to bounce away from you.

Link to comment
Share on other sites

If you check this topic on bounce ball you could probably still use some of the GSAP code in your canvas tween and timeline.




Due note that the below examples just animate DOM and SVG elements, but the GSAP principle are the same:


Jack's example using <div> tags with bouncing ball easing - Bounce.easeOut:


See the Pen 4db89a13f37bcb953f38c3ba00b60706 by GreenSock (@GreenSock) on CodePen


My example of bouncing ball, with squash and stretch in SVG.


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


You could also bounce your ball along a path as well using the bezierPlugin. This example uses <div> tags:


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



Hope this helps! :)

  • Like 5
Link to comment
Share on other sites

I love Jonathan's examples, especially the squishy one! 


It's also very easy to create bounce tweens using some of the physics plugins. However, the easiest way to create a simple bounce effect is probably just to reverse the speed of your object when it has exceeded some boundary.

// Reverse some vx and vy velocity values
vx *= -1;
vy *= -1;

Using -1 would make the bouncing continue forever. Using a lower number like -0.7 is good because it also does a good job of simulating gravity. Here's a super simple canvas example of that. Just look at the source code to see how it works.




One bouncing ball is cool and all, but lets take it a step further and add multiple... no wait, hundreds of bouncing objects. Click or hold down the mouse button to add more. All the bounce logic is inside the update method. Pretty simple.


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

  • Like 5
Link to comment
Share on other sites

 I have a feeling that by the time I am done writing this, someone will have a pen with three examples (Blake, most probably or Diaco)


That one made me chuckle.


I know what you mean Dipscom. Usually, by the time I'm half way through reading a question, Diaco has already posted 4 awesome codepens, posted them to Twitter and probably had time for a doughnut and coffee.  :-D

  • Like 3
Link to comment
Share on other sites

@PointC I thought the same thing about Jonathan's avatar the first time I saw it. But then I noticed that it was just a yellow version of the Pringles logo trying to pose as awesome face.


@Carl Is there something going on with Flash exporting to canvas? Both of your demos look very choppy.

  • Like 1
Link to comment
Share on other sites

Oh wow! That made it to the front page pretty quick. That's a pretty good benchmark for both GSAP and Pixi.


Each face is running 3 independent tweens doing rotation, scaling, alpha, plus an update call doing translation. On my computer, it doesn't start slowing down until there are around 2500-3000 faces full screen, and then the frame rate drops to around 30fps. Here's it is in a normal window showing the number of faces.




@Jonathan I would have never guessed that is from Abbott and Costello. Still looks like the Pringles mascot... or a two-eyed version of the Natty Boh mascot.



  • Like 4
Link to comment
Share on other sites

Great how this thread has been completely hijacked with many various side conversations...


Hope that jwave got the answer he was looking for. 


Shame my prediction was not accurate enough. I should have remembered the Jonathan lurks around here more or less in the same timezone I do. But not really sure what is his timezone. He seems to be here 20 out of 24 hours each day.

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