Bouncing Ball Y and X

[o3digital]

Hi,

Inspired by the bouncing ball demo with custom bounce, I try make the ball bounce on the "right wall".

After I need the ball finish is translation in the middle of the screen.

When the container "#playground" width is near to 1280 px it is quite good but when I reduce the width to 480 px the ball is going to far and not in the middle of the playground.

I 'm not sure to well understand the custom bounce...

 

Please a little help ?

Thomas

 

See the Pen LYeqvQm by omicronn (@omicronn) on CodePen

[GreenSock]

The bouncing is only on the y-axis. You can simply adjust where the "x" value is going. That means calculating how far it has to move on the x-axis to hit that "wall" that you're talking about. Probably use getBoundingClientRect() to do those calculations. 

 

Good luck!

[o3digital]

Thank you

Ok I have make a more simple anim with just a x-axis translation and back translation.

But It does not seems to be real....

I don't know if it s the way to do or if I have to have some easing !

 

See the Pen JjMzrWe by omicronn (@omicronn) on CodePen

[GreenSock]

Sorry, it's beyond the scope of help we can provide in the forums to finesse your animation timing, easing, etc. to make it look more realistic. Perhaps you're looking for a physics library? GSAP is generally for animating from certain values to others, with easing applied. It's not intended to do something like "apply physics and make it look like the div is bouncing off the wall and lands perfectly in a pre-determined spot, including squash and stretch". You can certainly get a good-looking result with enough tweaking of the values.

 

Good luck!