Rive Guide
Search…
Bouncing ball

In this tutorial, we'll show you how to build a bouncing ball in Rive. This tutorial is broken into three parts, design, rigging, and animation. Feel free to jump around and go directly to the information you are looking for.

Create a new file and choose an Artboard size.
Create a new file
Select the Artboard and modify its Fill in the Inspector.

Use the ellipse tool to create the base for the ball.
Select the shape and change the fill type from solid to radial. Reposition the stoppers and select some colors.
Change fill to radial and adjust colors and stoppers
Add an additional Fill in the Inspector. Adjust the stoppers and choose some colors.
Add linear gradient and customize

Using the pen tool, create a line across the ball. Duplicate and rotate that line to create a cross.
Select a line on the Stage, remove the Fill, and add a Stroke. Change the thickness and color, then change the blend mode from normal to multiply.
Drag the path layer of the vertical line onto the horizontal line shape layer. Be sure to delete the empty shape layer in the Inspector.
Add an ellipse, then duplicate it. Drag both of the ellipse path layers onto the shape layer we are using for the lines.
Select the shape layer and add clipping in the Inspector. When prompted, select the ball layer as the clipping source.
Change the origin of the detail shape.
To add rim lighting, duplicate the ball shape and remove the fill. Add a stroke and change the thickness. Scale the ellipse down slightly.
Rim light part 1
Change the fill to linear and adjust the position of the stoppers. Customize the colors and turn the opacity down.
Rim light part 2
Add another stroke and copy the thickness from the first stroke. Change the color.
Open the stroke options and enable trim path. Adjust the start and offset until the stroke is on the top of the ball.
Give the stroke rounded endcaps, then change the blend mode to overlay.

Create a shadow with a new ellipse. Use a radial gradient, customize the colors, then use opacity to create a feathered edge. Scale down the ellipse and position it below the ball.

Select all shapes that make up the basketball and create a group. Do this with CMD+G or CTRL+G.

Create a group for the shadow.

Group all objects on the stage in a "root" group. We won't use this group when animating, but it is beneficial if you need to change the entire composition's position, scale, or rotation.

Switch the editor to Animate mode with the Tab key.
Key the initial position of the ball group. Notice a key is automatically created when you transform the group.
Move the playhead forward to 30f, then key the ball in the down position. Next, move the playhead to the end of the timeline then copy and paste the first key to this location.
Change the animation from one shot to loop, then preview the animation.

Select the first key and change the easing from linear to cubic. Drag the right handle down to create an ease-in curve.
Create ease-in curve
Select the second key and change the easing from linear to cubic. Drag the left handle up to create an ease-out curve.
Create ease-out curve
Preview the animation and adjust the curves.

Key initial scale at the beginning of the timeline.
Stretch the ball as it falls.
Squash the ball as it hits the ground.
Copy and paste the second scale key where the ball starts to rise again.
Paste the first scale key to the end of the timeline.
Add additional position keys to account for the squash and stretch.
Adjust easing for all keys.

Key initial rotation.
Rotate shape slightly where the ball hits the ground. Copy the rotation key and paste it where the ball begins rising.
Move playhead to end of timeline and set a rotation key at 180 degrees.

Key the initial X scale of the shadow group.
Increase the X scale of the shadow group as the ball hits the ground.
Copy and paste first scale key to end of timeline.
Key initial opacity of shadow group.
Increase opacity as ball hits the ground. Maintain this opacity while the ball is on the ground.
Copy and paste first opacity key to the end of the timeline.
Ensure shadow group easing matches the ball group.
Preview the animation and make any adjustments necessary.
Copy link
On this page
Intro
Design
1.Create a new file
2. Create the ball
3. Add details
4. Create shadow
Rigging
1. Group the main basketball shapes
2. Create a group for the shadow
3. Create a root group
Animation
1.Key initial motion
2. Add easing
3. Squash and Stretch
4. Rotate detail shapes
5. Animate shadows scale and opacity