How to animate a bouncing ball effect?

[jroncero]

Newbie question:

 

Imagine a ball bouncing up and down while moving horizontally from left to right.

 

 

In the days of the Flash timeline, this could be done by animating along  a path. What's a good method to get this done with GSAP?

 

PS: the transformation of the ball getting squashed when hitting the ground is not necessary, just the bounce effect up and down and to the sides.

[Jonathan]

Hello jroncero, and Welcome to the GreenSock Forum!

 

Its great you want to tackle the bouncing ball.

 

Here is an example of bouncing ball, with squash and stretch in SVG.

 

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

 

In my example, im just bouncing the ball in place but if i wanted to move it forward, i would just animate the <g> tag of my #ball using x (translateX). Just so you could see how it is setup with various functions that return a timeline to the master timeline. I'm just using SVG here. I actually created the ball in Flash CC. I then exported my scene out of Flash CC using the Flash2SVG extension. Then i just used GSAP to animate my SVG ball parts that i had organized in Flash CC. Flash2SVG kept the same structure of my MovieClips and labels in a nice little SVG separated by <g> (group) tags. You can grab the Flash2SVG extension from inside your Adobe CC account extension area.

 

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

 

As you see there are various ways to bounce a ball, and probably even more ways, but you will have to play around with GSAP to see what works with what you are trying to achieve

 

Resources:

GSAP TimelineMax: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

GSAP bezierPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

 

[GreenSock]

Perhaps this would help: 

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

 

All it does is use a regular Power1.easeOut along the x-axis, and a Bounce.easeOut for the y movement. 

[jroncero]

Thanks for the tips. I ended up using the bezierPlugin approach. It took me a bit to figure out, but after getting it, it made the process very intuitive. 

 

As a side note, the level of support in the forums is impressive. You guys are very prompt and thorough with your help.

[deb]

How can I make a repeat animation with simple bouncing ball. No move forward or change pace. Juts simple repeat unlimited bounce animation. Example: http://yazarlikyazilimi.meb.gov.tr/Materyal/bolu/Kasim2008/teachinggrammar/images/BALL.gif

[PointC]

Hi deb 

 

Welcome to the forums.

 

If you want a simple bouncing ball that never ends, a repeating timeline is all you need. Something like this:

var tl = new TimelineMax({repeat:-1});

tl.to("#ball", .10, {transformOrigin: "50% 100%", scaleY:0.25, yoyo:true, repeat:1})
  .to("#ball", .75, {y:-400, ease:Circ.easeOut, yoyo:true, repeat:1});

See the Pen MyrbVr by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

[deb]

Thanks for the guide! It's exactly what I was looking for.