Create Interactive Animations and Graphics with Rive
1h 33mIntermediate2025-07-16
Authors
Tom Green
Teacher, Author, Professor
Course details
In this course, join expert Tom Green to learn how to create interactive graphics and animations using Rive. Tom shows you how to navigate and explain the Rive interface and tool set, import assets into Rive to create rich media, use the Rive timeline to create animation and motion upon the elements onstage, and use the Rive state machine to create interactive triggers that can be acted upon and build interactivity into your projects. Plus, see how to import Figma graphics and export Rive animations.
Skills covered
RiveRive, IncInteractive Web ContentUX DesignWeb DesignUser ExperienceLearningWeb Development
Concepts
0. Introduction
- 01 - Rive for interactive graphics
- 02 - Getting started in Rive
1. The Rive Dashboard
- 03 - An overview of Rive
- 04 - The Rive Dashboard - Overview
2. The Rive UI
- 05 - Rive's tools and menus
- 06 - Using artboards in Rive
- 07 - Using the Properties panel
- 08 - Using Layouts in Rive
3. The Rive Timeline
- 09 - The Rive Timeline - Overview
- 10 - Animation using Rive's Timeline
- 11 - Create motion paths
4. Adding Interactivity with State Machines
- 12 - The State Machine interface
- 13 - Create a hover effect
- 14 - Create a click event
- 15 - Add audio to an animation
- 16 - Use and manipulate a path animation
5. Create an iPhone UI with Scrollbar
- 17 - Importing assets
- 18 - Add UI elements and text
- 19 - Creating and manipulating child Layouts
- 20 - Add content
- 21 - Create an interactive scroll controller
6. Exporting Rive Animations
- 22 - Going from Figma to Rive
- 23 - The Rive export and sharing options
Conclusion
- 24 - Next steps