Timeline

Summary

This lesson introduces the Timeline, the core component for creating animations in Rive. By switching to Animate mode, you gain access to the timeline to set keyframes, adjust animation length, and control playback logic. The course details the basic interface, three playback modes (One-Shot, Loop, Ping-pong), and how to utilize the Work Area for focused previewing.

Step by Step

1. 00:10
   Switching Modes

   Click the Animate button at the top or use the Tab shortcut to toggle between Design and Animate modes.
2. 00:32
   Accessing the Timeline

   Click on the default timeline within the State Machine panel. Every state machine comes with at least one timeline by default.
3. 00:58
   Time Indicator & Length

   The numbers at the top show the current Playhead position. By default, new timelines are set to 1 second long.
4. 01:19
   Setting Keyframes

   Move the playhead to a point in time and modify an object's property (e.g., position) to set a keyframe. Animated objects appear in the list below.
5. 02:17
   Playback Modes

   • One-Shot: The default mode; plays the animation once and stops.
   • Loop: Continuously repeats the animation.
   • Ping-pong: Plays the animation forward and then backward.
6. 03:14
   Adjusting Duration

   Click the time indicator to change the total duration of the timeline. Use the top scrollbar to zoom or pan across longer timelines.
7. 04:10
   Advanced Playback Settings

   Within the time menu, you can also modify the playback Speed (including negative values for reverse) and the Frame Rate.
8. 04:35
   Using the Work Area

   Enable the Work Area to loop playback within a specific portion of the timeline instead of the whole duration.

Notes About Current Rive

• Workflow Tip: Any property changes made in Animate mode create keyframes. Switch back to Design mode for static structural adjustments.
• Shortcut: Press Space to play or pause your animation instantly.
• Interpolation: Rive automatically handles the "tweening" between keyframes. Spacing keyframes further apart will make the motion slower.