Timelines

Timeline web animation

Making web animations is super easy with the TorusKit, as it allows you to create the timeline (keyframes) animations right in the HTML! The animate trigger starts the animation immediately on page load (or DOMContentLoaded to be more precise), so you don’t need to trigger it manually.

Discrete timeline

The discrete timeline means, that there are only two values - the initial (from) value and the final (to) value. In most cases, you just need to define the final value, like the example below. To make the animation run forever, use the iterations: infinite or just the infinite shorthand. The alternate is shorthand for the direction: alternate and it means that animation will play back and forth when it finishes.

Read more about Discrete timelines.

Sequenced timeline

The sequenced timeline uses steps that are ordered in the sequence - once the step finishes, the next one starts. The syntax for the sequenced animations is pretty similar to cluster syntax, except that you wrap one or multiple properties into the step cluster.

Read more about Sequenced timelines.

Standard syntax

Shorthand syntax

You can also use the shorthand properties and options in the timeline definition.

Offset-based timeline

Similar to CSS keyframes, you can use percentage to specify the offset of the keyframes.

Read more about Offset-based timelines.