Timelines

Timeline web animation

Making web animations is super easy with the TorusKit, because 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 in a reversed direction when it finishes.

Sequenced timeline

The sequenced timeline uses steps that are ordered in the sequence - once the step finished, 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.

Standard syntax

Shorthand syntax

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

Offset-based timeline