How to Create a Convincing Bounce Animation - Part 1

Duration: 09:30

In this tutorial, you can learn how to create a convincing bounce animation.

Step 1: Setting Up the Scene

Start by creating a simple sphere or circle shape. If you plan to add rotation later, consider using a patterned ball to emphasize movement. Adjust the object's origin point and place it at the bottom of the shape instead of the center. This ensures the ball stays grounded when it squashes upon impact.

Step 2: Establishing the Key Poses

Move the ball to its highest position and set a position keyframe and a scale keyframe at the start of the timeline. Move forward in time and add two more keyframes and lower the ball to its impact position and stretch it slightly vertically to simulate acceleration.

Step 3: Applying Squash and Stretch

Right after impact, add two more keyframes. Squash the ball horizontally while reducing its height, and maintaining volume (as it gets wider, it also gets shorter). Move forward again and paste the stretched keyframe from before to simulate the ball springing back up. Copy the original starting keyframes to return the ball to its initial shape and position.

Step 4: Refining Motion with Easing

To create realistic motion, apply easing to keyframes. The ball should start moving slowly from its peak and accelerate as it falls. Use ease-in cubic easing for this. After impact, it should spring back up quickly and slow down at the peak. Apply ease-out easing for this section. Adjust the easing graph to reflect these changes.

Step 5: Fine-Tuning the Bounce Dynamics

Analyze the motion graph. The downward movement should have a steep curve to mimic gravity pulling the ball down, while the upward movement should be more gradual to simulate deceleration. Play back the animation and tweak keyframes as needed to achieve a smooth and natural bounce.

Step 6: Adding Extra Details

With the foundational bounce in place, experiment with additional refinements. Add multiple bounces, introduce subtle rotation, or incorporate secondary motion like a slight wobble after each impact. These details enhance realism and make the animation feel more dynamic.


Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!


Related tutorials to help you out:

How to Create a Spinning Ball Animation | SVGator
Learn how to create a fake 3D spinning basketball animation using SVGator! This tutorial will help you out, watch the video and follow the required steps.
How to Create Looping Cat Loader Animation | SVGator
Learn how to create a looping cat loader animation using SVGator! This tutorial will help you out, watch the video and follow the required steps.