Bouncing ball

Intro

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.

Design

1.Create a new file

Create a new file and choose an Artboard size.

Create a new file

Select the Artboard and modify its Fill in the Inspector.

2. Create the ball

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

3. Add details

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.

4. Create shadow

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.

Rigging

1. Group the main basketball shapes

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

2. Create a group for the shadow

Create a group for the shadow.

3. Create a root group

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.

Animation

1.Key initial motion

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.

2. Add easing

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.

3. Squash and Stretch

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.

4. Rotate detail shapes

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.

5. Animate shadows scale and opacity

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.