Patch Editor
Animation Patches
Transition Patch

Transition Patch

Use the Transition patch to transition something from one state to another depending on the data type selected. For example, you could transition an object from one position to another or from one color to another.

Inputs

NameDescription

Progress

This input displays the progress of the animation in real time, with 0 representing the initial state and 1 representing the complete state.

Connect this input to an Animation patch.

Start

Enter the starting state depending on the data type selected.

For example, if you selected a Vector 3 data type, enter the object’s starting location on the X, Y, and Z axes.

End

Enter the end state of the object depending on the data type selected.

For example, if you selected a Vector 3 data type, enter the object’s end location on the X, Y, and Z axes.

Output

NameDescription

Value

Output data to the next patch.

Curve

Use the Curve dropdown to change the pace of the animation in transition.

In the example below, we can see an animation play with a Linear curve. The object transitions in a linear progression from a starting state (the object is not visible) to an end state (the object covers most of the user’s nose).

In the example below, we can see an animation play with a Bounce In curve. The object transitions partway to the end state before reverting to the starting state and then jumping to the end state, creating a “bounce” effect.

The following curves are available:

NameVisual Representation

Linear

Sinusoidal In

Sinusoidal Out

Sinusoidal In-Out

Quadratic In

Quadratic Out

Quadratic In-Out

Cubic In

Cubic Out

Cubic In-Out

Quartic In

Quartic Out

Quartic In-Out

Quintic In

Quintic Out

Quintic In-Out

Exponential In

Exponential Out

Exponential In-Out

Circular In

Circular Out

Circular In-Out

Overshoot In

Overshoot Out

Overshoot In-Out

Elastic In

Elastic Out

Elastic In-Out

Bounce In

Bounce Out

Bounce In-Out

Example

In the example below, we can see an object transition forwards to backwards on the Z axis on a loop.

To achieve this transition, we used the following graph:

We connected:

  1. The Progress output on the Loop Animation patch to the Progress input on the Transition patch.

  2. The Value output on the Transition patch to the 3D Position input on the object consumer patch.

To make the object move forwards and backwards in a straight line, on the Transition patch, we set:

  1. The End point on the Z axis to 0.3.

  2. All other points to 0.

To create the loop, we enabled Mirrored on the Loop Animation patch.

Was this article helpful?