> ## Documentation Index
> Fetch the complete documentation index at: https://rive-transitions-2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Animate Mode Overview
export const YouTube = ({id, timestamp}) => {
const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
return ;
};
Use [animate mode](/editor/fundamentals/design-vs-animate-mode) to create timelines, state machines, keys, transitions, and interactive animation logic.
In Animate Mode, the editor shows animation tools such as the timeline, animations list, key controls, and interpolation options.
Editing objects while a timeline is selected can create keys. See [Design and Animate Modes](/editor/fundamentals/design-vs-animate-mode) to learn how to avoid accidental keying.
### Learn more about Animate mode
} href="/editor/animate-mode/timeline">
The Rive interface displays a timeline with playback controls and options for the current animation in Animate mode.
} href="/editor/animate-mode/keys">
Objects and their properties appear on the Timeline once they have been keyed. There are a few different ways to key a property.
} href="/editor/animate-mode/interpolation-easing">
When you set two keys on a property, the value in between those keys is automatically calculated. This is called interpolation.
} href="/editor/animate-mode/animating-draw-order">
You can change the draw order of your graphics at design time by moving items up and down the Hierarchy.
## Use case: Building a Bouncing Ball
This video walks you through animating a bouncing ball in Rive. We cover keyframes, interpolation and a couple classic principles of animation.