CSS variables

Overview

With the TorusKit you can even animate the CSS variables also known as CSS custom properties. You only have to make sure that the variable is defined on the element-level, or global via the :root CSS selector. With this, you can easily animate the Tailwind CSS variables.

Syntax

To apply and animate CSS variables, use the CSS-like syntax that begins with a double dash (--).

Use as a property

When you have a variable already defined in your style, you can change it with the TorusKit.

Use as a value

Another way how to use and animate the CSS variables is using them as a value of the property.

Examples

The examples below illustrate how to use CSS variables for hover effects, initial states, and animation timelines.

Initial value

Sometimes you need to start the animation, (or just style the element) from certain predefined state - an initial value. Because the TorusKit process the elements before the render, there is no Flash of unstyled content, so the styles are applied immediately after the page load.

As a property

In this example, the CSS transform property uses a CSS variable, var(--rotation), within its rotate function. We define --rotation as a custom property, which TorusKit sets to 45deg. This will cause the entire element to rotate by 45 degrees.

As a value

Here, we have the --size and --alpha already defined in the element’s style and we will use them as a values for the scale and opacity properties.

Animation

As a property

This example builds on the previous one with initial value, but this time --rotation is animated using the animate trigger. Note that you must define the initial value of --rotation either in the CSS or as an initial value in the data-tor attribute. We’ve set it using the inline CSS style attribute with --rotation: 0deg;.

As a value

When using CSS variables as property values, they represent the final value (state) of that property. In this case, both --size and --alpha CSS variables define the final values for scale and opacity, respectively.

Tailwind CSS variables

Animating Tailwind CSS variables with TorusKit is easy. Simply select the variable you want to animate and set its final value.

Initial (static styling)

Change the Tailwind CSS variable static styling by using it as an initial value. In this case, we are modifying the background color opacity of the bg-violet color. Tailwind uses the --tw-bg-opacity variable to customize the opacity of the background color, so to make it 0.1, we’ve simply set it to --tw-bg-opacity(0.1).

Animating Tailwind CSS variables

You can also animate any Tailwind CSS variable. This example uses the animate trigger to animate the --tw-bg-opacity, but you can use any of the available triggers.