> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Timeline

export const YouTube = ({id, timestamp}) => {
  const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
  return <iframe width="100%" height="400" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />;
};

<YouTube id="-ftpyjPbHEs" />

The Rive interface displays a timeline with playback controls and options for the current animation in Animate mode. A list of all animations is displayed to the left of the Timeline. Keep in mind that these are animations for the currently [active artboard](/editor/fundamentals/artboards#active-artboard).

<img src="https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/5c396825-8293-4d8b-8968-aff442075b60.webp?fit=max&auto=format&n=LTt3dbNyEAMvuJ4M&q=85&s=4fdcdd1dd2107183337c044f90ab0b42" alt="Image" width="1142" height="297" data-path="images/editor/animate-mode/5c396825-8293-4d8b-8968-aff442075b60.webp" />

## Animation type

<img src="https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/fa768437-b336-4730-8375-a4307176e17b.webp?fit=max&auto=format&n=LTt3dbNyEAMvuJ4M&q=85&s=7fa19ba78521b70ec1fc4cb869d8b872" alt="Image" width="1142" height="297" data-path="images/editor/animate-mode/fa768437-b336-4730-8375-a4307176e17b.webp" />

**One-Shot:** The playhead stops at the end of the animation.

**Ping-Pong:** The playhead continuously plays from the start point to the end point and back from the end point to the start point.

**Loop:** The playhead continuously loops the animation from the start point to the end point.

**Work Area:** The work area defines the playback area of an animation. Work areas are an easy way to focus on a small portion of a larger animation.

<YouTube id="m-uqQo-6cAU" />

## Navigate Timeline

The Navigate Timeline menu gives you a list of helpful shortcuts to navigate the Timeline.

<img src="https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/08ccf645-e2df-43e5-8bc6-0fa64ab264f5.webp?fit=max&auto=format&n=LTt3dbNyEAMvuJ4M&q=85&s=c3be3db2720fd359444a6fed050df981" alt="Image" width="1142" height="297" data-path="images/editor/animate-mode/08ccf645-e2df-43e5-8bc6-0fa64ab264f5.webp" />

## Show Only Selected

The Show Only Selected toggle can be helpful when dealing with animations with many different objects keyed. When this option is toggled on, only objects that you have selected will appear on the timeline.

<img src="https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/31b183db-26be-400f-be2c-52a6ab73bd03.webp?fit=max&auto=format&n=LTt3dbNyEAMvuJ4M&q=85&s=d4f27dbb3c8ffb3bf07f3f431868e403" alt="Image" width="1142" height="296" data-path="images/editor/animate-mode/31b183db-26be-400f-be2c-52a6ab73bd03.webp" />

## Timeline Options

Located to the right of the playback select, the Timeline Options show you the current time, duration, playback speed, and snap keys options.

<img src="https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/7c8302ac-73ac-42f2-9d05-b176d26a67e0.webp?fit=max&auto=format&n=LTt3dbNyEAMvuJ4M&q=85&s=1862d3cb8aa8c2a4379e4887ac76fbf6" alt="Image" width="1500" height="800" data-path="images/editor/animate-mode/7c8302ac-73ac-42f2-9d05-b176d26a67e0.webp" />

**Current:** The current position of the playhead.

**Duration:** The total length of the timeline.

**Playback Speed:** The speed at which the animation should play. The default speed is 1x. Negative values cause the animation to play backward.

**Snap Keys:** The interval at which keys can be placed on the Timeline. By default, keys can be set at a subdivision of 60 for each second.

## Navigating the Timeline

**Scroll and Zoom:** Use the horizontal scrollbar at the top of the Timeline (with two grabbers on each side) to scroll and resize the Timeline's zoom level.

**Pan:** You can also use the same pan shortcuts as the stage to pan the Timeline (right-click and drag, or hold the spacebar and drag).
