Property utilities

Overview

TorusKit comes with various built-in utilities such as Shorthands, that shorten the property names to write the code faster, Aliases that combine multiple properties into one meaningful property name, Composition that allows you to add or reduce the effect of the currently played animation, and others. All these utilities simplifies your work and make them more efficient.

This pages acts as a quick overview of some of the available utilities. All of them can be found on dedicated Utilities page.

Shorthands

Shorthands helps you to write your code faster by shortening the full CSS properties or options names. Read more about all available Shorthands.

In this example, the scale CSS property becomes just s and the duration: 1s, direction: alternate and iterations: infinite can be shortened into 1s, alternate, infinite.

Aliases

Aliases combine multiple property definitions with custom options into a single meaningful property. All Built-in effects in TorusKit are created using the aliases.

Here are a couple of examples of using the aliases to demonstrate how TorusKit can simplify your workflow.

Loops

Loops are predefined animations that play in infinite loop. TorusKit includes with numerous built-in loops that are listed on the Loops page.

Animation Composition

Animation composition allows you to add or reduce the effect of currently played animation. To add a value into the animation, use the (+){value} operator. On the other hand, to reduce the animations value, use the (-){value} operator.

No process operator

TorusKit uses the CSS calc() function everywhere possible. It allows to combine different units such as px with rem, but still, some numeric values can’t be used with it. For example, while grid-column-templates supports fractional (1fr) values, it doesn’t work with calc(). In such cases, use the ^ operator, a TorusKit no-process utility. This prevents the value from being processed and keeps the numeric value intact.

Variables

Variables help minimize repetitive definitions by allowing you to create a single definition that can be reused in multiple places. There are two types of variables: global variables, defined by a double dollar sign $$, which are available to all child elements, and local variables, defined by a single dollar sign $, which are available only at the current element level.

You can even simplify the code by placing all options into the variable definition. In this case, the duration: 2s, easing: spring options are set in the global $$options variable (you can choose any name) to prevent from repeating definition in each translate property.

References

References allows you to trigger another external animations on the same or a different elements based on a given animation state. You can execute the reference at a start or finish of the property animation, or even at a specific percentage of its progress. References are used for the Animation chaining where you can create advanced and complex effects.

In this example, we have a main (or parent) element with a translateX property that triggers on hover. The @finish option specifies that the @grow reference should execute once the current translateX reaches the finish value, in this case the 1rem.

Please note, that if you hover-out, the animation switches to the leave mode and plays from the finish value back to the start. So the reference (@grow in this case) is executed at this stage.

To gain more control over animation chaining, you can trigger references at specific percentages of the animation’s progress.

In this example, we animate three elements, each with its own @move reference trigger. The triggers are set to activate at different points in the animation timeline. For instance, @0%: @move1 means the @move1 reference is triggered at 0% of the animation’s progress. Similarly, @33% triggers at 33%, and @66% at 66% of the progress.