Sequenced animation timeline type

Overview

The sequenced timeline type uses a sequence of steps to create an animation. When one step finishes, the next one starts. Unlike the standard CSS animation, TorusKit supports smooth revert of animation anytime in the animation playing state. For example - if you hover the element and the animation starts, then in the middle of the playing state you hover out, the animation will smoothly revert back from the current state to the initial one.

Syntax

Like the Clusters, the sequenced animation timeline uses [] brackets to wrap multiple steps together. Each step is then represented as a separate cluster and can contain one or multiple properties.

Examples

These examples show how easy is to create various sequenced CSS animations with the TorusKit. The syntax is pretty straightforward and easily understandable. We have created the two animations with a different triggers to show how TorusKit handles animation in different scenarios.

One property

This basic examples show one property per step. Each animation has a three steps so we have used three clusters.

Multiple properties

This is more advanced animation with multiple properties per step and obviously with more steps. As you can see, you don’t have to define all properties in each step. Just the ones you need to animate.

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.