Bouncing ball

This article is out of date! Find the new version here.

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.

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.

Add an additional Fill in the Inspector. Adjust the stoppers and choose some colors.

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.

Change the fill to linear and adjust the position of the stoppers. Customize the colors and turn the opacity down.

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.