# Graph View

{% embed url="<https://youtu.be/b4NHucatkWo>" %}

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FWyHMuF6TK5hdzTHNRoGh%2Fimage.png?alt=media&#x26;token=11a94989-7a86-4411-ae9b-eac1c4c991a8" alt=""><figcaption></figcaption></figure>

The Graph View displays animation curves for the channels selected in the [Object Panel](https://axongenesis.gitbook.io/timeflow/user-guide/timeflow-view/object-panel). Each curve is displayed in the [color assigned](https://axongenesis.gitbook.io/timeflow/user-guide/channels#color) to the channel.&#x20;

{% hint style="success" %}
To keep animation curve visible in the graph view, regardless of whether the channel is selected, toggle the small curve icon ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FPY0kdWLwNjhCwXwjOwD7%2Fimage.png?alt=media\&token=2f6c781a-9c55-4645-99f1-1254c58cf818) in the [switches](https://axongenesis.gitbook.io/timeflow/user-guide/timeflow-view/switches "mention") panel.
{% endhint %}

## Graph / Track View Toggle

Switch between the Graph View and Track View by pressing the view mode button ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2F7BNGyKmHryidQa6qmUjQ%2Fimage.png?alt=media\&token=c6814d4b-cf9a-4cd4-b1a4-525d2d968db3)  in the lower left corner.

{% hint style="success" %}
Use the keyboard shortcut **G** to switch between the Graph View and Track View.
{% endhint %}

## ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FCvAGKnGppnzoolsM02Vn%2Fimage.png?alt=media\&token=c4a9828e-39b5-4198-bed3-7c0da5dd73d8) Select Tool

This is the primary editing tool that allows keyframe selection and general editing of all features. While in the Graph View, this button switches between the Select Tool and Tangents Tool.

{% hint style="info" %}
In the Track View, the select tool has different modes. See [track-view](https://axongenesis.gitbook.io/timeflow/user-guide/timeflow-view/track-view "mention")
{% endhint %}

### <img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FwSGS4PoWEpjA8T5kR3rS%2Fimage.png?alt=media&#x26;token=b69257c9-1766-488a-9d4d-e8e6cd8f0071" alt="" data-size="line"> Tangents Tool

This button toggles between regular editing mode and tangent editing. When tangent mode editing is enabled, only keyframe tangents can be moved and edited in the graph view, while keyframes themselves remain untouched and cannot be moved or selected.

{% hint style="info" %}
Use Edit Tangent Tool any time you are having difficulty editing keyframe tangents or simply want to prevent selecting and editing keyframes. This mode is helpful when making fine adjustments.
{% endhint %}

{% hint style="success" %}
Use the keyboard shortcut **C** to toggle between Select Tool and Tangents Tool.
{% endhint %}

## Navigating the View

Working with the graph is mostly the same as the Track View when it comes to navigating time. One difference however is that the graph view uses the vertical dimension to display values, which can range from the very small to very large.

{% hint style="success" %}

#### ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FDKUH9NgLqOx4qWiAk7Cs%2Fimage.png?alt=media\&token=d0cdfe04-71dd-4ec7-822e-8191f90c2d24) Fit View

Click the **Fit View** button or use the shortcut key **F** to center and fit the currently selected keyframes in the view vertically. If no keyframes are selected, then all curves currently displayed in the view are fit.&#x20;
{% endhint %}

{% hint style="success" %}
![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FWRxbYoOfIKIBkzoKLtjE%2Fimage.png?alt=media\&token=151145a7-e7ba-4db3-9370-7334e9ff856b) **Fit View Auto**

Use the keyboard shortcut **Control + F** to toggle automatic graph fitting, applied whenever a channel is selected or switching to the graph view. Alternatively, hold the **Control** key while clicking the **Fit View** button to toggle auto mode.
{% endhint %}

{% hint style="success" %}

#### Frame Selected

Press **Shift + F** to frame the current selected keys (or all displayed curves if no keyframes are selected) including its entire time range. This is a good way to zoom in on a selection of keyframes, deselect all and zoom out to view the full graph.
{% endhint %}

{% hint style="success" %}

#### Vertical Scroll

Use **Control + Alt** with the mouse scroll wheel to zoom the graph view vertically.&#x20;
{% endhint %}

{% hint style="success" %}

#### Pan View

Hold the Alt key and left-click and drag anywhere in the graph view to move the view freely.
{% endhint %}

## ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FfmKPWqvmNw3NnGMEYO9o%2Fimage.png?alt=media\&token=a17468cd-fa65-44d9-be47-235940d3ddc0) Alignment Tools (Bounding Box)

Click the **Alignment Tools** button to toggle the visibility of the bounding box. This displays a white box around the selected keyframes with handles for stretching, squashing, and translating the selection.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2Fyld2IK9c207rT6VQrunZ%2Fimage.png?alt=media&#x26;token=c23d02e4-2c89-426c-9820-5dfde75496a6" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Use the keyboard shortcut **T** to toggle the **Alignment Tools**.
{% endhint %}

{% hint style="info" %}
Hold the **Control** key while adjusting the box handles to keep the box centered.
{% endhint %}

For more information, see [alignment-tools](https://axongenesis.gitbook.io/timeflow/user-guide/timeflow-view/alignment-tools "mention")

{% embed url="<https://youtu.be/HkTHmXYdgcQ>" %}

## Graph Locking

By default, the graph view displays whichever channels are selected on the left (as shown below)

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FeOQOuI04Dj1wx0YiVAgX%2Fimage.png?alt=media&#x26;token=c61ecc5a-fd50-4daa-a864-6dd6df388473" alt=""><figcaption><p>Showing the current selection makes it quick to switch between different channel graphs.</p></figcaption></figure>

If you want any channels to remain in the view regardless of selection, there are two options. First, each channel may be locked to the graph by clicking on the small curve icon ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FODSlHDt1jc5uDnIvXUiX%2Fimage.png?alt=media\&token=77f52954-2b7a-4911-a7c2-c2f96a50193a) to the left of the channel name. This results in the channel graph being displayed even when it is deselected (as shown below).

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FdU2stXLhlyiRY3qq9MGm%2Fimage.png?alt=media&#x26;token=c250fd48-3ae6-437a-a1a2-75efa2fa4432" alt=""><figcaption><p>This method of locking channels in the view is helpful when you want to use a channel as a reference.</p></figcaption></figure>

{% hint style="info" %}
If you wish to display a channel but prevent making any changes to it, it may also be locked by clicking the lock icon on the far left.&#x20;
{% endhint %}

Another method of locking the graph view is clicking on the lock icon ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FNxGdkTyhmPy2wk9Qm1mP%2Fimage.png?alt=media\&token=91f33d9c-8bde-4c2a-8587-e1eca8ea863e) in the lower right corner of the view. This locks the view with the channels currently being displayed.  Any other channels selected will not be displayed until the view is unlocked, or the channels are added to the view by clicking the curve icon.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FJU9szaUQx2kUYh6IVvHA%2Fimage.png?alt=media&#x26;token=22b81181-2bbc-4ac8-8a09-6178ba08ec1b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
As long as the graph is locked ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FgXWmwphAQmaIrUuzCHB3%2Fimage.png?alt=media\&token=49a2f8ad-79fa-44f0-8ea9-9c943dfa01d2)  no channels are displayed other than those with graph lock ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FAMqHBr7SD0nS06T8qaIR%2Fimage.png?alt=media\&token=b2fdc65a-d5ab-4879-96fe-267818d5d1cd) enabled. This mode is helpful when you wish to continue editing on specific animation graphs without the view being affected by selection, so you may freely work with other objects as needed.
{% endhint %}

{% hint style="info" %}
When the graph view is unlocked, it also unlocks all channel graphs.
{% endhint %}

{% hint style="success" %}
Use the keyboard shortcut Alt + L to toggle locking the graph.
{% endhint %}

{% hint style="success" %}
Holding the Shift key while clicking the curve icon ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FODSlHDt1jc5uDnIvXUiX%2Fimage.png?alt=media\&token=77f52954-2b7a-4911-a7c2-c2f96a50193a) disables drawing certain channel features in the Track view, such as gradients, midi notes, and audio wave forms. This has no effect on animation but can improve performance in the UI when channels are drawing slowly. &#x20;
{% endhint %}

### Solo Mode

When the Graph Lock is active with multiple channels visible, by default all curves shown are clickable and editable. Enable solo mode to disable selection and editing for all but the selected channel(s) while still displaying the channels locked to the graph. While in solo mode, the locked graphs are drawn slightly dimmer. This is helpful while editing to avoid accidental changes to other curves.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FwhPGmy25DRB2fPNLZgKV%2Fimage.png?alt=media&#x26;token=ac287a6d-fd0a-429e-84e7-4ec1b3d4ed50" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
While in solo mode, double-click on any keyframe to select and solo the channel it belongs to.&#x20;
{% endhint %}

## Interpolation Modes

This determines how keyframes are interpolated and whether or not curves are used to create smooth animations. Channels can be set to one of the following interpolation modes, which can be changed at any time as needed.&#x20;

{% hint style="info" %}
To switch interpolation modes, click the red curve icon <img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FpQLKJe7VpeeJrxvbNQ44%2Fimage.png?alt=media&#x26;token=296bf544-96c0-4967-b158-7efced3b6eb4" alt="" data-size="line"> below the graph. This applies to all selected channels.
{% endhint %}

### Linear

With this mode, no smoothing is applied resulting in constant speed on a straight trajectory from one keyframe to the next. This type of movement is usually good for mechanical animations or anything with a constant speed.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FxGpicbdpW9shVibSwy4F%2Fimage.png?alt=media&#x26;token=6a74f3d5-ee37-4d66-ba2c-eb7da8a77194" alt=""><figcaption><p>An example of linear interpolation</p></figcaption></figure>

### Quadratic

This mode automatically eases in and out of each keyframe creating a smooth curve. This mode is often used to for simple animations that don't need extra tweaking. This usually works best for to-and-fro animations.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FRFAczFczz77rbQAlH6HP%2Fimage.png?alt=media&#x26;token=44495123-5574-4692-8d30-3e17dcdb6f3a" alt=""><figcaption><p>An example showing quadratic interpolation</p></figcaption></figure>

### Bezier

This mode offers additional handles and tools to fully customize curve interpolation on key-by-key basis. Use this mode for complete curve editing capabilities. Bezier curves have several additional tools discussed in the [next section](#bezier-curves).

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2Fi1iPyHx9s6ryfFADLykg%2Fimage.png?alt=media&#x26;token=db92654d-6742-4898-854d-5627ab271ceb" alt=""><figcaption><p>An example of using Bezier interpolation</p></figcaption></figure>

{% hint style="info" %}
The following 2 interpolate options can be set on a key-by-key basis using any of the channel interpolation modes.
{% endhint %}

### Interpolate Hold

Any keyframe can be set to hold its value until the next keyframe, creating the distinctive shelf appearance in the curve, as shown below.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FPDpQWHkeLbPfNM1B2yJm%2Fimage.png?alt=media&#x26;token=4415fc97-1067-42ed-b31a-d9317b986fbe" alt=""><figcaption><p>Keyframes set to Hold</p></figcaption></figure>

Keyframes using hold mode are drawn as squares (instead of diamond shape) to help distinguish them. Use this mode anytime you want to jump from one keyframe to the next without interpolation.&#x20;

{% hint style="info" %}
To change the hold setting for keyframes, click the icon button ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FEas2gp05REeb8qMnix9N%2Fimage.png?alt=media\&token=d52a6e0b-7119-48a2-9e61-95a9957b0bbe) This toggles Interpolate Hold on or off for the currently selected keyframes.&#x20;
{% endhint %}

### Interpolate Linear

Set this on any keyframe to force linear interpolation. This affects the curve leading into and out of the keyframe. This can be set on quadratic and Bezier curves.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FX5OqZ2SmyosABiJOKPkU%2Fimage.png?alt=media&#x26;token=00fb0288-707c-423d-ab4e-2196e1702449" alt=""><figcaption><p>An example of 1 keyframe set to linear interpolation on a quadratic curve</p></figcaption></figure>

## Bezier Curves

A Bezier curve displays handles for each keyframe used to bend the curve into any shape needed. This is the most versatile and widely used curve.

### ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FdXlP65w8QJfQUlNLmLc2%2Fimage.png?alt=media\&token=c4aaecae-e49a-475f-a8d6-c9c29c4eb81f) Auto Calculate Tangents

Keyframes can be set to auto-calculate tangents to automatically create a smooth curve between its neighboring keyframes. When enabled, keyframe handles are drawn in cyan (rather than green, the default).

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FfyhNgHqRSXdeZxqz5zsR%2Fimage.png?alt=media&#x26;token=9486ec10-022a-417a-9eb0-e48d75b59053" alt=""><figcaption></figcaption></figure>

When using auto-calculate mode, keyframes automatically adapt to changes to the curve. This dynamically changes the Bezier handles based on the position relative to its neighbors, anticipating whether handles should be flattened or angled.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2F6SgHAf6WHLf7AUtyZV1U%2Fimage.png?alt=media&#x26;token=790e177a-bac6-4f75-afb8-47d23e311dae" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
At any point the Bezier handles can be manually adjusted which turns off auto-calculate and displays the tangents in green.
{% endhint %}

### ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FLGbIoP1Tmt9qyGrzVCoI%2Fimage.png?alt=media\&token=2bae0f12-8508-475f-9581-8937a1b7ce59) Straight Tangents

* **Horizontal (Flatten)**: This places the Bezier handles on a level horizontal line. This is useful to ensure that animation curves do not dip below or above the target value.&#x20;
* **Vertical**: Makes the tangents straight vertically for the selected keyframes.
* **Horizontal Left/Right**: Use these buttons to flatten the left or right tangent only.&#x20;

{% hint style="warning" %}
Adjusting tangents disables auto-calculate and may change the tangent lock modes.
{% endhint %}

### Tangent Modes

This controls how the left and right tangents relate to one another on a per-keyframe basis.&#x20;

#### <img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FH2Xu6lLchSVGVH38Augy%2Fimage.png?alt=media&#x26;token=1fe4aba2-f660-498d-9302-9f91736c9397" alt="" data-size="line"> Unify Tangent Angles

When this mode is selected, adjusting either tangent handle affects the other, so that they remain in a straight line on the same angle, though still allowing each side to be a different length. This is the default mode, providing smooth curves that can adapt to small or large gaps between keyframes.

#### ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FweqQvQW97ZfmoiJu1L0m%2Fimage.png?alt=media\&token=2f6c8a8a-7fb1-42ad-943b-653fd120de56) Unify Tangents Equal Length

This mode also unifies the tangent angles, however it also forces the handles to be the same length (distance from the keyframe). Adjusting the length and angle of one side affects the other equally. This mode works best to create smooth animation between evenly spaced keyframes where uniformity is desired.

#### ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FVIsPF0WWnMqjmQo47PxT%2Fimage.png?alt=media\&token=40769e67-3988-4ae9-9a86-79301bdb0096) Independent Tangents

Use this mode to create abrupt changes in velocity or direction. This allows for more extreme curve shaping allowing for more sudden changes in the animation.&#x20;

### Showing / Hiding Tangents

The tangents for each keyframe may be shown or hidden to prevent editing. This option is available in the context menu by right-clicking on selected keyframes and selecting Show or Hide Tangents.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FAKrotTXX08wgpfKtisok%2Fimage.png?alt=media&#x26;token=9c311fbc-77e0-4539-b2f4-6e8e560781f9" alt=""><figcaption></figcaption></figure>

See the [Keyframes Menu](https://axongenesis.gitbook.io/timeflow/user-guide/menus-and-shortcuts/context-menus/keyframes-menu) documentation for further information.

## Looping Animation

Every keyframe channel has built-in looping capability. This can be used to loop a whole animation, a set of keyframes, or a specific time range.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FrYn5OqB25YlqtKwJMXMV%2Fimage.png?alt=media&#x26;token=63beab3e-db9a-41a7-a06a-bdb23fd6d579" alt=""><figcaption><p>Looping options are found in the lower toolbar and in the context menu.</p></figcaption></figure>

When looping is enabled, only the specified range of the curve is repeated. Any parts of the animation curve outside of the range are ignored and displayed in a dark grey line for reference.&#x20;

### Loop Mode

{% hint style="info" %}
Click the loop mode icon ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FkgUE1RxcuS1AzYPANoWu%2Fimage.png?alt=media\&token=99099065-1ebb-42c5-9a1a-fc6f3d6bfc85) (in the lower left of the window) to change the looping mode for the selected channels.&#x20;
{% endhint %}

#### ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FQVy4tMwtyIkymwtnWskE%2Fimage.png?alt=media\&token=06e27343-3571-4fc9-b91f-728447db2a56) Loop Off

This is the default mode and disables looping on the channel. The arrow indicates that it is playing forward in one direction only.

#### Loop On&#x20;

This circular arrow indicates that looping is on for this channel. It plays forward and repeats from the beginning.

#### Loop Ping Pong

This plays the animation forward and then backward in a continuous loop. This mode is useful for creating pulsating, waving, and to-and-fro animations.

### Loop Range

Looping is achieved by repeating the same range of time within a channel. The range is defined by a start and end time, which can be set automatically or manually. When loop is enabled, the range is displayed in the graph view, as shown below.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2F6urhDASkT2dWIZ1LRo0e%2Fimage.png?alt=media&#x26;token=c00524c3-5420-4be7-b3dc-b33a08bdb000" alt=""><figcaption></figcaption></figure>

&#x20;The loop range can be manually adjusted by clicking and dragging on the loop handles on either side.

### Auto Loop

While enabled, this sets the loop range to the first and last keyframes in the channel and automatically updates with any changes made to the keyframes.&#x20;

### Loop In / Out

Looping can be setup to repeat before and/or after the time range.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FL57tA2J9C8M3eN2hEc98%2Fimage.png?alt=media&#x26;token=593187f7-d702-445a-a1ca-4752225e48d0" alt=""><figcaption><p>Loop In and Loop Out can be individually toggled using the red and blue arrow buttons. </p></figcaption></figure>

{% hint style="info" %}
If Loop In and Loop Out are both disabled, then looping is effectively off.
{% endhint %}

### Loop Limit

A limit can be set to control how many times the loop occurs. This affects both loop in and loop out. To repeat forever, set the limit to 0.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FnaBo7JEsByY1qyZlNGXu%2Fimage.png?alt=media&#x26;token=f430bd8c-672e-4d15-8264-6ea8c9d46286" alt=""><figcaption></figcaption></figure>

### Match End Points

When this option is enabled, the first and last keyframes within the loop are forced to match in value so that a perfect loop is always made. This links the start and end keyframe values so that any changes to one affects the other.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2F23drVZhJlPYMnvjJYfdz%2Fimage.png?alt=media&#x26;token=efd7de1a-01ab-4c13-af15-701303e5ad9e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Matching end points works even if the end keyframes are inside or outside the loop area, however for best results it is recommended to have keyframes exactly at the start and end of the loop range.
{% endhint %}

When this option is *disabled*, the default Free Curve mode becomes active, which leaves existing keyframes unmodified.

### Additional Options

More options to clear and set looping can be found in the context menu by right-clicking anywhere in the Graph View. This includes the ability to remove the loop, set the loop range to the selected keyframes, or to loop the whole channel.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FCgc7k605WZXEdATxiZoE%2Fimage.png?alt=media&#x26;token=a6b4e57c-3c01-439e-a8ec-d1ee6d8bff85" alt=""><figcaption></figcaption></figure>

For more details, see the [keyframes-menu](https://axongenesis.gitbook.io/timeflow/user-guide/menus-and-shortcuts/context-menus/keyframes-menu "mention")