Graph Editor

Summary

The Graph Editor provides a visual representation of animations where the horizontal axis (X) represents time and the vertical axis (Y) represents property values. It allows users to view and adjust multiple keyframe interpolations simultaneously, offering more precise control over animation flow compared to the standard timeline view.

Step by Step

1. 00:04
   Accessing the Graph Editor

   Click the Graph Editor icon located in the timeline toolbar to switch views.
2. 00:20
   Viewing Keys

   Select an object or a specific animated property to display its corresponding curves in the graph.
3. 00:46
   Visualizing Interpolation

   Observe how Linear and Cubic interpolations appear as lines or curves; changes in the interpolation panel reflect instantly here.
4. 01:27
   Editing Values

   Click and drag a keyframe vertically to change its value (e.g., height of a bounce) or horizontally to change its timing.
5. 02:14
   Adding Keyframes

   Add new keys by copy-pasting, adjusting values in the Inspector, or clicking directly on the interpolation line.
6. 02:59
   Managing Multiple Properties

   Use Shift + Select to display multiple property lines (like X and Y position) at once.
7. 03:34
   Using Cubic Value

   Switch to "Cubic Value" interpolation to enable Bezier handles directly within the Graph Editor for manual curve shaping.
8. 04:19
   Asymmetric Handles

   Adjust handles to affect the interpolation of both preceding and succeeding segments, ensuring smooth animation flow.

Notes About Current Rive

• Visual Clarity: Avoid displaying too many properties at once in the Graph Editor, as the overlapping curves can become messy.
• Cubic vs. Cubic Value: Standard "Cubic" applies a preset curve, while "Cubic Value" exposes editable handles in the graph for custom easing.
• Flow Control: The Graph Editor is particularly powerful for complex animations where you need to see the relationship between different property values over time.