Quick start

Syntax

The core of TorusKit’s syntax lies in using the data-tor attribute on your desired HTML element. Inside this attribute, you define the triggers and properties you want to animate. The simplified structure is as follows: {trigger}, {property}, {value}, and optional {options}.

Trigger

The trigger, as the name suggests, triggers the animation on the desired element when activated. TorusKit offers numerous trigger types for different actions. Triggers can be user-driven or can be started automatically. The complete list can be found on the Triggers page.

In this example we are using the hover trigger that will triggers the scale property when hovered, and animate that animates element automatically.

Property

The property attribute refers to the CSS property name, the TorusKit’s Shorthand or the Alias. Property names syntax are written in dash-case so it’s the same as CSS properties. The way you define the property with it’s value is similar to writing a function - property name is followed by the parenthesis: property-name(...).

Full property name

Example below is similar to the above one, but in this case, the property is background-color with the #ff0000 color value.

Property shorthand

Value

Property value lives in between the parenthesis. It can be a number, text, unit value, color, or other CSS-supported value. In some cases, multiple values can be also defined. The value you are defining inside the parenthesis represents the end value of the property. That means, if you set the translateX to 20px as an example below, the element will be translated to the end value of 20px. If you want to also set the initial value (in other words the start value), you can use the Static styling.

Unit value

The most used case is the number values with the unit. You can use any CSS-supported value. TorusKit is not limiting you to use just px values.

Unit-less value

Some of the CSS properties uses an unit-less values, that refers to a numerical value without any unit specified, such as pixels. Common examples are opacity, z-index, scale…

Text value

Some CSS properties accept text-based values. These values are (unlike the unit / unit-less) are discrete. That means they cannot be smoothly calculated from the start value to end value. The example below shows this behavior - when you hover the button, its border becomes solid immediately (no smooth transition). When you hover out, it becomes dashed again.

Multiple values

TorusKit supports multiple values inside parenthesis for properties like box-shadow, that are separated by the space, or the rgba() CSS function where values are separated by comma.

Options

Options are used to customize the property behavior. The most used options that are common for every property are duration, delay, easing, direction, iterations. There are also other options such as pause that are available for the Timeline animations. Options are defined in the angle brackets <> and separated by the comma ,.

Full option names

The standard way to define the options is to use the option name and its value in this syntax: {name}:{value}.

Shorthand options

To make your work even faster and effortless, TorusKit allows you to use Shorthand names for some options like duration, iterations, direction, easing,etc.