---
description: Create to-and-fro, one shot, and repeating animations
---

# Tween

{% embed url="https://youtu.be/rfwMv2z8NyM" %}

Tween is used for creating oscillating motions on any property with a range of options. Use Tween for anything that pulses, bobs, spins, or moves back and forth. Motions can be precise and regular or random and chaotic. Create animations that play once or loop.&#x20;

{% hint style="success" %}
Add a new Tween by right-clicking an object then go to **Add Animation > Tween** and select a target property from the list of components and materials on the object.
{% endhint %}

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FJJbyjxU5pmhYjMhHe3pC%2Fimage.png?alt=media&#x26;token=e932464c-0df5-48b3-8fee-e29be403c497" alt=""><figcaption><p>Use the context menu as shown above to add new Tween channels</p></figcaption></figure>

## Channel and Property Mapping

Each Tween has only 1 channel, but multiple instances may be added per object. Each Tween has its own settings and channel. Reassign [properties mappings](../../../../user-guide/timeflow-view/properties#assigning-properties) as needed using the [Info Panel](../../../user-guide/timeflow-view/info-panel) or in the inspector.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FmenahV48Bb7f46LwQSLY%2Fimage.png?alt=media&#x26;token=3e97dbed-ccc1-4f66-b161-96472476a08a" alt=""><figcaption><p>Click the property name button in the <a href="../../../user-guide/timeflow-view/info-panel">Info Panel</a> to select a different property. </p></figcaption></figure>

{% hint style="success" %}
Tween channels by default display a preview curve in the [Track View](../../../user-guide/timeflow-view/track-view) and [Graph View](../../../user-guide/timeflow-view/graph-view). To turn off the curve display, use the toggle ![](https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FiB4BTl4HpnSbWc3ImAJf%2Fimage.png?alt=media\&token=5afeac12-8ef9-4a26-aaf8-299d978fd01a) in the [Switches](../../../user-guide/timeflow-view/switches) panel.&#x20;
{% endhint %}

As with all other behaviors in Timeflow, Tween only processes animation during active track sections, as depicted in the screenshot below, unless [Always Update](../../../../user-guide/menus-and-shortcuts/context-menus/channel-menu#always-interpolate) is enabled.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FvPfPPhu7hBDAkVr0gCy8%2Fimage.png?alt=media&#x26;token=99ad4830-84ef-4fb2-b549-9b27fddae151" alt=""><figcaption><p>Optionally use track sections to </p></figcaption></figure>

Tween channels do not have keyframes, but may be used with [channel links](../../../user-guide/timeflow-view/channel-link), to combine with keyframe and other animation channels for more complex motion.

## Tween Editor

For setup and additional editing features, select an object and view the Tween editor in the Inspector. For common features, please refer to [Properties](../../../user-guide/timeflow-view/properties), [Menu Bar](../../../user-guide/timeflow-editor/menu-bar) and [Update Settings](../../../user-guide/timeflow-editor/update-settings).

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FbQQrz8iPJsXL2HNjWfya%2Fimage.png?alt=media&#x26;token=b9994ba6-9d40-4962-883f-a9d6c9bf3acf" alt=""><figcaption><p>Default settings for new Tween in the Inspector view.</p></figcaption></figure>

{% hint style="info" %}
Tween displays its main property mapping at the top in the [Menu Bar](../../../user-guide/timeflow-editor/menu-bar).&#x20;
{% endhint %}

## Usage

Once Tween has been applied to an object and target property selected, adjust the Timing section to set the desired duration and repeat interval if any. Adjust the Tween settings to set the start and end values, interpolation method, and optional randomization and offset.&#x20;

## Timing

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FI5fYUSDSZiIx0Zs0vECz%2Fimage.png?alt=media&#x26;token=68e3eed3-ca2d-476c-af55-124a4d8f86de" alt=""><figcaption></figcaption></figure>

### Duration

<div align="left"><figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FVdf8r6kyHgA11Iye65Pn%2Fimage.png?alt=media&#x26;token=586a6aed-23e2-4765-b049-5ea104f948ba" alt=""><figcaption></figcaption></figure></div>

Sets the time it take to complete 1 interval of animation. A single interval animates from the start value to end value over the duration, or if [Ping Pong](#ping-pong) is enabled then a single interval goes from start, to end, to start, over the same duration.&#x20;

#### Seconds

Sets an interval time in seconds. Use this to enter an exact time in seconds.&#x20;

#### Beats

Sets the interval time based on [BPM](../../../../user-guide/timeflow-editor/time#bpm). When this mode is enabled, the **Note** field is also displayed to select the note type and count, determining the interval duration. If the Timeflow BPM checkbox is enabled, it automatically uses the BPM as set in the Timeflow settings. Otherwise this can be unchecked to enter a specific BPM for this Tween.

#### Markers

Uses [Markers ](../../../user-guide/timeflow-view/toolbar/markers)to set the start and end time of the Tween. This lists all markers in Timeflow, though if none have been created then only START and END (the built-in markers) are displayed.

#### Object Duration

Uses the duration of the containing TimeflowObject based on the start and end of its track channel. This spans from the start of the first track section to the end of the last track section.

#### Total Time&#x20;

Uses the full [duration ](../../../../user-guide/timeflow-editor/time#duration)of TImeflow. Use this to create a tween animation that spans the full timeline.

### Start At

<div align="left"><figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FqTHMDY1zGo5NNDodLpod%2Fimage.png?alt=media&#x26;token=f4b3d440-f703-4a10-a901-b5ad85d62a8a" alt=""><figcaption></figcaption></figure></div>

Sets the start time of the animation. These are similar to the options described above, but specify an exact time rather than a duration. Tween only begins animating once the time is reached or passed. Start is the default to play immediately.

{% hint style="info" %}
The Trigger option is a scripting feature that allows Tween to start animating when  Trigger() is invoked, and to stop when TriggerStop() is invoked. This can be done via script using a reference to the Tween object, or using Unity [SendMessage](https://docs.unity3d.com/ScriptReference/GameObject.SendMessage.html).
{% endhint %}

### End At

Determines the time at which Tween stops animating. The default mode is Never, which means the Tween continues to animate as long as the object is active in the timeline.

### Repeat

Determines how many cycles of the animation to play.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FFOh46Fx02uB9D1xLCSAT%2Fimage.png?alt=media&#x26;token=a4a9b640-e8a8-4030-aa78-cb795a10e8ae" alt=""><figcaption></figcaption></figure>

Forever is the default mode, meaning the Tween never stops repeating. On the otherhand if No is selected, then animation is not repeated and the Tween plays its animation just once based on the Duration settings above.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FujxjnWNqSt4OOVsBvFCH%2Fimage.png?alt=media&#x26;token=d16584a5-5370-4bf4-ae21-997a5ab21ed5" alt=""><figcaption><p>The options for Repeat Every are similar to the Duration above.</p></figcaption></figure>

When Every mode is selected, a secondary set of options defines the repeat interval, which can be different than the Duration to control spacing of the animation over time. This can be used to create animations that occur periodically rather than looping back-to-back.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FzFcdrPrZkhx3QHGtIUBQ%2Fimage.png?alt=media&#x26;token=c0e9dd26-3c8f-4602-947d-37b4357b585a" alt=""><figcaption><p>An example using Repeat Every duration to increase hold duration between cycles </p></figcaption></figure>

### Hold Mode

When using Start At and End At, this determines what the Tween's resting value is.&#x20;

#### Hold Start and End Values&#x20;

This is the default mode which uses the start value for times before Start At, and the end value for time after End At.

#### Default Value

Sets a constant value on the target property when Tween is not animating (before it starts, and after it ends).

#### None

If this mode is selected, Tween does not process or apply any values and the target property is left unchanged whenever the time is before the start and after the end.

{% hint style="warning" %}
When Hold Mode is set to None, this can result in incomplete Tween animations when jumping in time. This isn't an issue during continuous playback, but while editing in the timeline if you move the current time from an active section of the Tween to an inactive section, it's value remains unchanged which may appear incorrect. Use one of the other hold modes if this becomes an issue.
{% endhint %}

### Act on Trigger

This is an advanced feature that allows Tween to be started and stopped via script. This directly relates to the [Start At](#start-at) Trigger mode described above.

{% hint style="warning" %}
Act on Trigger must be enabled for Tween to receive Trigger() events. Also note that in the Tween script, this is defined as boolean AllowTrigger.
{% endhint %}

#### Complete Cycle

When enabled, Tween finishes animating the current interval before it can be stopped or restarted by trigger events. Any extra messages sent during these times may be ignored. This can be used for interactive elements to ensure that each Tween trigger goes to the full 'on' and 'off' positions without interruption and only responds to new triggers once complete.

### Random Seed

Sets the seed value for the random number generator used in the +/- fields. This value may be changed to make variations on Tweens using randomization.

## Tween

Sets the start and end values for the tween animation.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2Fs2knjJvvXalhyKGJD1EM%2Fimage.png?alt=media&#x26;token=004cc523-7901-475d-a425-fc0e856d34c9" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The type of values displayed is determined by the [property](../../../user-guide/timeflow-view/properties) selected. Tween supports numeric and color properties only, since object and string values cannot be interpolated.
{% endhint %}

### Start / End Value

Tween animates between the Start Value and End Value based on [Timing ](#timing)and [Repeat ](#repeat)settings.&#x20;

{% hint style="warning" %}
The start and end values must be constant and should themselves never by animated. Tween performs additional setup to optimize interpolations and changing these values dynamically at runtime will produce unknown results. To achieve something similar, use [Channel Link](../../../user-guide/timeflow-view/channel-link).
{% endhint %}

### Offset

If enabled, the final value is offset by the specified amount. This is useful to shift a Tween animation.&#x20;

{% hint style="success" %}
This value is safe to animate and may be a target property for another Tween.
{% endhint %}

### Randomization +/-

This optionally adds a random range to the start and end values, based on the [Random Seed](#random-seed).&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FZl4Jbakiwwjn3qxHwNrE%2Fimage.png?alt=media&#x26;token=43a27063-5cbd-4646-a898-97b85609c4f0" alt=""><figcaption></figcaption></figure>

The randomization value (+/-) sets a potential offset range that may be plus or minus the target value. In the example shown above, the Start Value may be any number between -5 and 5 (0 +/- 5), whereas the End Value may be any number between 5 and 15 (10 +/- 5).

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FvrpX4x9NcEF6UTgETgDi%2Fimage.png?alt=media&#x26;token=dcf2e810-7bd9-4e1c-8eb4-e96a47387ecd" alt=""><figcaption><p>The resulting graph preview showing the randomization values applied above.</p></figcaption></figure>

{% hint style="info" %}
Tween pre-calculates random values so that the resulting animation is deterministic. This means that randomization is consistent each time curves are recalculated. Use the [Random Seed](#random-seed) value for variations.
{% endhint %}

## Interpolation

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FfCXeOU7Goh66LSvQ2VCx%2Fimage.png?alt=media&#x26;token=7609e3b5-ce0f-4a63-b427-8e3d470e54a8" alt=""><figcaption></figcaption></figure>

Refer to [Interpolation Modes](../../../glossary#interpolation-modes) in the Glossary.

### Invert

Flips the interpolation to reverse the resulting animation curve.

### Ping Pong

{% hint style="info" %}
Note that this control was previously named 'To and Fro'
{% endhint %}

If enabled, animation goes back and forth (start -> end -> start ...) within the duration specified. Otherwise, if Ping Pong is off then the animation goes one direction (start -> end) and jumps back to the start each cycle.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FTK967ncftFEKkMnY0Bdo%2Fimage.png?alt=media&#x26;token=620c47ec-3e43-4fc3-840a-e6a95b04a41a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Tip: Continuous Rotation**\
Make an object continually rotate by setting the Start Value to 0 and the End Value to 360, and disable Ping Pong. Select Linear interpolation for steady smooth rotation. Then adjust the speed with the [Duration](#duration).
{% endhint %}

### Amount

Use this slider to reduce the intensity or degree of animation. This blends the value towards the Default Value, or to 0 if another Hold Mode is selected.&#x20;

{% hint style="info" %}
Note that [Offset ](#offset)is applied _after_ Amount, so that it may be used to adjust the final value.
{% endhint %}

### Phase

Offsets the tween cycle to shift the animation forward or backward in time.&#x20;

{% hint style="info" %}
Phase can be useful to offset the timing of similar or duplicate animations to create the effect of a delay or staggered movements.
{% endhint %}

### In/Out Point

Adjust the in and out points to add padding (in time) to either end of each cycle. This also shortens the duration of the actual animation.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FgHDSplOzn4l5KtHcS7vg%2Fimage.png?alt=media&#x26;token=54592b21-02b6-412c-b2b8-ca3545bb3c72" alt=""><figcaption><p>Adjusting the in and out points affects the curve as shown below.</p></figcaption></figure>

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FpARFvlku9tIWKVNjVtEh%2Fimage.png?alt=media&#x26;token=60fd6e74-526b-482d-b4f9-71030b9821f2" alt=""><figcaption><p>This is somewhat similar in result to <a href="#repeat">Repeat Every</a> but a different approach.</p></figcaption></figure>



### Smoothness

This reduces the time interpolations occur but maintains the same duration overall. This has the effect of blending from full interpolation to none.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FX9llFpB9UNWjT8Uvu5ii%2Fimage.png?alt=media&#x26;token=d822d173-fa37-4e78-ad28-824d91a31a16" alt=""><figcaption><p>Use Smoothness to accelerate value transitions and increase hold times.</p></figcaption></figure>

The lower the smoothness, the faster the transition and longer it holds the end value. If smoothness is 0, it is the same as [None](../../../glossary#none) interpolation.

## Multiple Objects

This is an advanced feature to apply a Tween animation on a series of objects. The most common setup is for a parent object to control children by apply the same Tween to each.

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FrmZIhB7g3aHtINNXMzSp%2Fimage.png?alt=media&#x26;token=f993804c-4deb-42b9-8b7f-23d8468207aa" alt=""><figcaption></figcaption></figure>

This can be used to create waves, pulses, and other effects that travel through a series of objects, or affect them all in unison.

{% hint style="warning" %}
It is possible to target different properties by reassigning them in the object list, however note that Tween expects the properties to be of same or like type and doesn't offer any way to remap or change the value range per object, other than the settings shown. &#x20;
{% endhint %}

{% hint style="info" %}
To create more complex property mappings, use [Channel Link](../../../user-guide/timeflow-view/channel-link) to remap or modify Tween output values to other properties.
{% endhint %}

### Apply to Each

Select **Children** mode to use immediate children of the current object, or use **Object List** mode to manually assign objects and properties.

{% hint style="danger" %}
Be aware that if you use Tween to control other objects in the scene, it can lead to confusing scenarios unless target objects are noted or organized in way to know what's controlling it. This will be improved in future versions with tools to discover references.
{% endhint %}

### Children Only

If enabled, Tween does not affect the parent (current game object) and only applies the Tween to the child objects.&#x20;

{% hint style="warning" %}
It is recommended to enable this when using **Children** mode to animate transforms, otherwise the child motion is compounded with the parent's.
{% endhint %}

### Offset Each

This specifies a duration (optional) to offset each the Tween as it applies to each object in the list. This is useful for creating trailing motions that move through the objects rather than happening all at once.

### Envelope

This varies the amount of the Tween as it is applied to each object in the list based on the curve type selected. This essentially applies the curve profile across the objects. &#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FpxtYmLN4IYVWKMHoPSs7%2Fimage.png?alt=media&#x26;token=1b254be8-f7a5-47ba-a8c3-b4f8f34fbf4b" alt=""><figcaption><p>Envelope effect of Ease In Out (applied to the Y position of objects)</p></figcaption></figure>

One or both ends of the list may be pinned in place depending on whether an In or Out curve is selected.  For further documentation on the curve modes, see [Interpolation Modes](../../../glossary#interpolation-modes).

### Objects List

Use the list of objects to manage each [property assignment](../../../user-guide/timeflow-view/properties). Each object is initially assigned the same property as in the Tween settings. Use Gather Children to recollect and rebuild property mappings for all child objects.&#x20;

{% hint style="info" %}
**Gather Children** clears the list first, so do not use this button if you wish to preserve current object assignments. Otherwise, this is a good way to rebuild the list after changes have been made.
{% endhint %}

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FWOp6zE6s5R4XLkh6ypdM%2Fimage.png?alt=media&#x26;token=61c0737a-43b4-4e34-ba98-30c6b1167e5c" alt=""><figcaption><p>Additional property settings are shown by clicking the circular link icon to the left of the property button.</p></figcaption></figure>

{% hint style="warning" %}
Children or objects in the list must have the same target property as the parent, otherwise the default property mapping will fail and show errors. For example, if you're targeting the material property '\_Color', each object in the list must have a material with the same property. This is not an issue with transforms since all objects have one. To solve this, simply make sure that each objects has the same component or material being mapped to.
{% endhint %}

#### Recursive

Enable this to work with all game objects in the hierarchy. This also affects Find by Name, allowing it to traverse the whole hierarchy to find objects with matching names.&#x20;

#### Find by Name

Finds all the objects that match the name entered (in the field shown). Enable **Exact** to match names precisely, or otherwise find any object that partially matches it. This can be helpful for targeting multiple objects distributed throughout a hierarchy without having to change the structure.

{% hint style="info" %}
This operation searches the hierarchy of the current object (or one assigned with [Apply to Each](#apply-to-each)), however once the list has been created the property mappings are preserved no matter if the objects are reparented and moved.&#x20;
{% endhint %}

## Overrides

Provides a way for a Tween to be remote controlled, or to blend to a specific value. This is often used in cases where a Tween behavior needs to transition into or combine with keyframe animation.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2Fr8kW1dHDlBnbFesWGFYe%2Fimage.png?alt=media&#x26;token=53e7c302-4a79-4e4a-b929-4d231becdb7e" alt=""><figcaption></figcaption></figure>

#### Override Interpolation

This takes over control of the interpolation (i.e. amount of completion between the [Start Value](#start-end-value) and [End Value](#start-end-value)). This does not blend with the original Tween timing and fully overrides it. When enabled, the slider blends between the start and end values according to the [interpolation ](#interpolation)type selected. The interpolation value may then be animated or controlled via channel link or script.

#### Override Value / Blend

If **Override Blend** is greater than zero, the final output of Tween is blended with the **Override Value**. The value may be constant, animated with [keyframes](keyframer), or using a [channel link](../../../user-guide/timeflow-view/channel-link). The blend slider can then be animated to transition smoothly from the Tween motion to the override value.&#x20;

{% hint style="info" %}
Both override modes may be used together if needed. Note that the **Override Value / Blend** takes precedent over **Override Interpolation**.
{% endhint %}

## Output

Displays the final computed value and channel options.&#x20;

<figure><img src="https://2067910529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dOuetlQfYgK5FPUKgn%2Fuploads%2FP7DQbn3SfUPjPLzUkOaQ%2Fimage.png?alt=media&#x26;token=2246c532-baa2-407c-b211-5532fd336c71" alt=""><figcaption><p>Note that the Final Value is for display only and cannot be set directly.</p></figcaption></figure>

{% hint style="info" %}
Note that Tween does not support the [channel looping features](../../../timeflow-object/channels#loop-settings) since it provides its own looping mechanisms.&#x20;
{% endhint %}

See [Channel Link](../../../timeflow-object/channels#channel-link) and [Set Shader Global](../../../timeflow-object/channels#set-shader-global) for more details.



