Property animation options

Overview

TorusKit lets you customize the behavior of individual properties by modifying their options, such as duration, iterations, direction, and more. Each property operates independently, allowing you to adjust its options individually. Unlike traditional CSS, where a property like transition-duration applies to all transformations (e.g., scale, translate, or rotate), TorusKit enables you to customize them separately.

Syntax

Property options are defined within angle brackets <> and separated by commas ,. Each option is specified using the format option-name: option-value.

Full name

The full-name syntax follows the format option-name: option-value, where you explicitly define both the name and value of each option. This format is useful when the meaning of the option value may not be immediately clear without the context provided by the option name.

Example

Shorthand

The shorthand syntax allows you to omit the option name and use only the value. This is a more concise way to define property options, especially if you only need to set a single or common option.

Example

Here were are using just 1s (duration), alternate (direction) and infinite (iterations) shorthand values.

Responsiveness

Like property values, options can be customized for different resolutions using the same syntax as responsive values. Define the values within square brackets [], and specify each resolution using the format {resolution}::. Always start with a default value (which applies to all resolutions), together with a specific resolutions you want to target. Each resolution is defined with one of the sm, md, lg, xl or xxl resolution name, followed by the :: double colon.

For example, the option <duration: [1s xl::3s]> sets the animation duration to 1 second for all resolutions (from xs and up) until xl. For xl and larger, the duration changes to 2 seconds.

Full name

This example demonstrates how to make animation options responsive across different screen sizes using the full syntax definition, consists of the option-name: option-value. We are customizing the duration, direction and iterations options:

• duration: [1s xl::3s] - The animation lasts for 1s up to the xl resolution. For xl screens and larger, the duration changes to 3s
• direction: [normal md::alternate] - On screens up to md resolution, the animation runs in the normal direction. At md and larger, it switches to the alternate direction
• iterations: [5x xxl::infinite] - Animation repeats only 5 times (5x) on resolutions that are lower than xxl. But will plays in infinite loop on xxl.

Shorthand

The responsive values can be defined using the shorthand syntax, too:

• [1s xl::3s] - TorusKit found the time definition here (1s / 3s), so it recognize it as a duration
• [normal md::alternate] - The normal and the alternate are reserved words for the direction
• [5x xxl::infinite] - The x means the how many times should animation iterate and the infinite is reserved words. Both means iterations

Time-based trigger options

Various options are available to customize the behavior of CSS property animations:

duration

How long the property animation should last.

iterations

How many times the animation should repeat. The iterations options can use the fixed {number} of repeat, or the infinite number, where the animation will repeats forever. When using a shorthand for the fixed number of repeats, use the {number}x definition, where the x is some kind of alias for the times. To set the infinite repeats, just use an infinite keyword.

direction

The animation direction defines the playback behavior. In normal mode, the animation plays forward, while in alternate mode, it plays back and forth.

Normal direction

The normal direction is the default, so you don’t need to explicitly specified it.

Alternate direction

An alternate direction makes the animation to play back and forth.

delay

Defines the delay before the animation starts, both when entering and leaving. For example, when a user hovers over an element with delay: 1s, the animation waits for 1s before starting. Similarly, when the user hovers out, the animation will wait 1s before starting again.

pause

Defines the pause between each iteration. When an animation with pause: 1s reaches the end, it will pause for 1s before continuing to play again.

easing

Similar to CSS Transition timing function, the easing option defines how the animation should progress over the bezier curve during the time. To define the property easing, you can use either a bezier option (alternatively with the alias), or the spring one.

Bezier

The bezier option value uses the Bezier curve to animate the CSS property over the time. It consists of four parameters and defined with the bezier(x1, y1, x2, y2) syntax. Alternatively, you can use a predefined easing aliases such as ease-in, ease-in-out-expo, linear and so.

Example

This example uses the custom easing defined with bezier(1, 0, 0.5, 1.5) to create an elastic effect.

Linear

Ease in

Ease out

Ease in out

Ease in expo

Ease out expo

Ease in out expo

Spring

The spring easing uses a spring motion logic instead of the bezier curve (like above examples) and takes only one parameter to customize.

Default value

If you want to use a default value, just use a single spring keyword without any parameters.

Custom value

To customize the easing, pass a {number} parameter into the parentheses. In the example below, a spring strength of 50 (instead of the default 20) is used by defining spring(50), resulting in a more powerful spring effect.

order

When using CSS transform properties such as translate, rotate, scale, and others, the order in which they are applied matters. This can be surprising, as the same transformations applied in different sequences may produce different visual effects. To avoid this confusion, you can use the order option to explicitly set the processing order of each transformation. The starting value for order is 1.