Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jwave

object falling diagonally with bounce easing in correct direction?

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?

 

Thanks

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Nice Carl that could be a nice starter pen to play with GSAP and CreateJS Flash CC B)

  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Hey, jwave!

 

As you might have noticed, there has been no downtime here so far. But if you want to dive in yourself, there is another thread that touched in this subject, you might want to check that out.

  • Like 1

Share this post


Link to post
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.

 

http://greensock.com/forums/topic/12741-how-to-animate-a-bouncing-ball-effect/?hl=bouncing+ball#entry53591

 

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

Share this post


Link to post
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.

 

http://lamberta.github.io/html5-animation/examples/ch06/05-bouncing-2.html

 

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

Share this post


Link to post
Share on other sites

@Jonathan - nice examples. Those are really cool!

 

@Blake - that is mesmerizing - at first I thought the little smiley faces were going to be Jonathan's avatar. :)

  • Like 2

Share this post


Link to post
Share on other sites

Great examples everyone!

 

jwave, the problem is that you are bouncing along the x axis and y axis. You just need separate tweens for each, and only bounce the y

 

TweenMax.to(this.box, 3, {y:300, ease: Bounce.easeOut});
TweenMax.to(this.box, 3, {x:500});

http://codepen.io/GreenSock/pen/KdLRab?editors=001

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@blake, probably just the frame rate which is 24. try changing to

 

// library properties:
lib.properties = {
width: 550,
height: 400,
fps: 60,
color: "#FFFFFF",
manifest: []
};

Share this post


Link to post
Share on other sites

Much better! Is that a well known setting? Can't believe how low it is.

Share this post


Link to post
Share on other sites

Yeah, its a carry-over from the flash banner days. Flash's default new document frame rate is 24. Its easy to change in the IDE

 

BTW just saw your pixi-faces demo make it to the homepage of codepen. http://codepen.io/ sweet!

  • Like 1

Share this post


Link to post
Share on other sites

Yeah at 24 frames it looks great on mobile chrome Motorola Droid Turbo latest Android version.

 

Oh and @blake that Italian smiley face mustache is from Abbott & Costello's Mr Bacciagalupe  .. funny :)

Share this post


Link to post
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.

 

http://s.codepen.io/osublake/debug/422cac5b3a294960857c2cc05f48ff78

 

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

 

GX6DRYl.jpg

  • Like 4

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Dipscom .. My timezone is Eastern Standard Time, but I'm only here 18 out of the 24 hours! .. gotta get my 6 hours of beauty sleep :)

  • Like 1

Share this post


Link to post
Share on other sites

This is probably Jonathan's "beauty sleep".  :-P

 

l63gpGx.jpg

  • Like 3

Share this post


Link to post
Share on other sites

The answer I needed was in there, but lots of other interesting and useful stuff too. Makes me realise I still have an awful lot to learn. Thanks very much!

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×