Introduction to built-in effects and loops

Overview

TorusKit offers a built-in animations designed to speed up the process of creating and implementing the CSS animations with two key features: Loops and Aliases. These features streamline your workflow by making animations easier to implement, manage, and customize.

Loops

Loops are pre-defined infinite animations that run continuously without any additional setup. Ideal for dynamic UI elements like loaders, spinners, and attention-grabbing components. Loops eliminate the need to manually handle keyframes or animation durations. Simply apply a Loop to your element, and it animates indefinitely.

Syntax

To create a looped animation, use a loop trigger together with your desired variant and parenthesis at the end. Majority of variants offer a value and options customization.

Examples

For example purposes, we’ve chosen the loop:jump() to demonstrate how easy it is to create an infinite jumping CSS animation with TorusKit. However, you can choose any of the available built-in Loop animation variants.

Defaults

Simply use loop:jump() without any customization to quickly create an animation that starts automatically and runs in an infinite loop

Customized

Many built-in loops can be customized with a custom value and options. In this example, we’ve set the value to 2rem, making the element jump higher, and the duration to 2s, making the animation last longer than the default.

Aliases

Aliases are predefined sets of multiple CSS properties bundled under a single, memorable name. Instead of writing out multiple lines of CSS, use an Alias to apply multiple properties at once. Aliases make animations intuitive and reduce the likelihood of errors.

Syntax

The syntax is similar to the Loops, but Alias allows you to combine it with any supported trigger. You can also customize both the value and its options.

Examples

To demonstrate the use of Aliases, we’ve chosen the pull-up() variant, which combines two CSS translate values into a shorthand that creates a pull-up CSS animation. In this example, the pull-up() alias is combined with the hover trigger, causing the element to pull from its initial shifted-down position to its regular position on hover.

The gray dashed line shows how the element is initially shifted from original position.

Defaults

Every alias comes with its own default values. By default, pull-* aliases shift the element by 1rem from its original position (initial) and translate it back to 0rem (final) when triggered.

Customized

Like loops, most aliases can be customized by overriding their default values and options. In this example, we’ve set the value to 2rem, shifting the element further down from its initial position than the default. Additionally, setting duration: 2s makes the animation last longer.

Combinations

It’s possible to combine different loops, aliases, and other animations. However, some combinations may conflict due to the use of the same properties. It’s important to test what works for your specific case. In the example below, we’re combining the swing (rotate), pulse (scale), and radiate (box-shadow) loops with the push-up (translate) alias, along with rotate and bg-darken (background-color). These effects behave as expected, unlike the example further below.

Correct combination

Incorrect combination

In this example, we’re combining two effects that both use the CSS scale transform. As a result, the pulse loop doesn’t scale from its default state of 1 to 1.2, but instead starts from 0, because the grow alias has a default value of 0. Run a few tests to find the desired result.

Cluster

To save time and reduce code, use the cluster utility. It lets you group multiple animations that share the same trigger.