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.
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.
Add an additional Fill in the Inspector. Adjust the stoppers and choose some colors.
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.
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.
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
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
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 second key and change the easing from linear to cubic. Drag the left handle up to create an 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.