Jump to content
GreenSock

jroncero

How to animate a bouncing ball effect?

Go to solution Solved by Jonathan,

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

Newbie question:

 

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

 

bal04.gif

 

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.

Link to comment
Share on other sites

  • Solution

Hello jroncero, and Welcome to the GreenSock Forum!

 

Its great you want to tackle the bouncing ball. :D

 

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/

 

:)

  • Like 4
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • 5 months later...

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.

:)

  • Like 4
Link to comment
Share on other sites

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

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