Animation Editor

You can use the Animation editor to select or modify an animation. You can find the Animation editor in the Transition editor, or else in the property controls of certain Code Components.

You can choose between two main types of animation: Ease and Spring.

Ease Type

An Ease-type Animation has a fixed duration. It uses an easing curve to determine the relationship between the animation's progress and the value of an animating property.

The Animation editor displays the current easing as an interactive graph. In the graph, the horizontal axis represents the animation's progress from start to end and the vertical axis represents the animating value.

When this relationship is perfectly even, the graph will display a straight line. However, you can create more interesting animations by curving this relationship so that the animation starts slower and then speeds up, starts quickly and then slows down, or even overshoots before returning.

Ease

To select a pre-defined easing curve, choose an option from the Ease dropdown.

Curve

To edit a curve, click on either of the curve's handles.

Time

The Time property defines the animation's duration, or how many seconds the animation will take to complete.

Tip: While the property's slider only goes up to 2 seconds, you can type in a larger number for slower animations.

Delay

The Delay property sets how many seconds the animation will wait before it begins.

Preview

You can see a simulation of the current animation curve in the Preview property.

Spring Type

An Spring-type Animation does not use a fixed duration. Instead, it uses a physics-based model of a spring to determine both the animating value and when the animation will end.

The Animation editor displays the current spring as a line graph. In the graph, the horizontal axis represents the animation's elapsed time and the vertical axis represents the animating value.

Stiffness

A spring’s Stiffness determines the spring's velocity and how many times the spring will bounce before the spring settles and the animation ends.

Damping

A spring’s Damping controls the amount of friction working against the spring. A higher damping will result in a smoother animation, while a lower damping will create a more bouncy spring, with more of these up and down oscillations. A spring with no damping should spring forever.

Mass

A spring with more Mass will have a slower acceleration but will take longer to settle and have more overshoot on each bounce.

Preview

You can see a simulation of the current animation curve in the Preview property.