Jump to content
Search Community

Bounce ball off wall

nbde6j3 test
Moderator Tag

Recommended Posts

I'm a little lost on how to create the effect I'm after.  In my Codepen, I have a ball that roles across the browser window until it hits the right side of the window and then bounces using the bounce ease.  However, what I'm really after is to simulate what would happen if you rolled one of those old rubber kickballs you used in elementary school.  If you rolled that into a wall, it would hit the wall, and then bounce back while also gaining some vertical lift and then gravity would pull it back down to the ground.  In the desire effect in the code, ideally it would come to rest in the bottom center of the browser window after hitting the side of the browser window.  Would this require the physics plug-in or something similar?

See the Pen VwLoGgY by nbde6j3 (@nbde6j3) on CodePen

Link to comment
Share on other sites

Hey nbde6j3 and welcome to the GreenSock forums. 

 

For an animation this choreographed, it likely just requires playing with individual tweens until you get the effect you're after. Even if you were using a full physics engine (which GSAP does not have) to make it end up in a specific location you'd have to do a lot of finagling of values. So I say just make a tween for the initial motion, a tween for the movement up, a tween for the bouncing after that, and a tween for the movement back to the center of the screen. 

 

You might also be interested in CustomBounce which can do some built in squash and stretching for you:

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, nbde6j3 said:

Zach,  as far as using additional tweens, what technique would you recommend for curved movement?  The MotionPathPlugin? or something else?

It depends on how complicated of curves you need. You can mix two tweens (one that affects the x and one that affects the y) to do curves like what Carl talks about in his most recent video. For a more complicated curve, the MotionPathPlugin is the best way to go :) 

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