Offset-based animation timeline type

Overview

The offset-based timeline type uses offsets (or waypoints) to define the intermediate steps of an animation sequence. This is similar to CSS keyframes, but features a simpler syntax and does not require defining all properties at each offset (step).

Syntax

Like the Clusters, or the Sequenced timeline, the offset-based animation timeline uses [] brackets to group multiple offsets (steps) together. Each offset must be defined with a percentage, like 0%:[translateX(1rem)], and can contain one or multiple properties. Here is the structure of this timeline type:

Examples

Let’s look at some real examples to understand this better. The examples below use four percentage offsets (steps) to define different animation behaviors. Each example specifies different percentage values to demonstrate how these affect the animation. Additionally, note that you can optionally set the initial values for all the properties used in the animation in the first step.

You maybe think that it is suitable to use the Static styling for the initial values definition, but this is not the case when you define them in the 0% offset.

With default initial values

Even that most of the properties initial values are calculated automatically, you can set them in the 0% offset (the first step) just like in a regular CSS @keyframes definition.

Custom initial values

Or you can set the custom value in the 0% offset that will be applied immediately as an initial value.

Shorthand

You can use a shorthand properties for above animations to make your work even faster.

Options

Check the Timeline Options section to fine-tune the animations.