Introduction to utilities

Shift the element position without affecting the transform properties

Overview

TorusKit utilities are a set of tools designed to simplify and speed up your workflow. By eliminating the need for verbose JavaScript or CSS, these utilities allow you to focus on creating rich, interactive user experiences with minimal effort.

Examples

Explore how TorusKit utilities simplify creating dynamic, reusable, and interactive behaviors. These examples demonstrate key use cases like chaining animations, shifting elements, toggling classes, reusing properties, and more—all with concise, intuitive syntax.

Control Animation with References

Create an interactive hover effect that triggers multiple external animations using the references:

Hover Me

@fade

@move

What happens?

  • The element grows (scale(1.5)) on hover.
  • At the animation start, it fades another element (@fade).
  • At the animation finish, it moves a different element (@move).

Toggle Classes Dynamically

Dynamically toggle a class to change styles on user interaction.

Click Me

Description

  • When the element is clicked, the rotate-45 class is added or removed
  • This rotates the element by 45deg

Reusing Defined Properties Across Elements

Create reusable values with variables to maintain consistency in animations.

Hover Me

Click Me
  • The $$shared property defines a reusable scale(1.5) animation.
  • Both the hover and click triggers use the same property, reducing code duplication.

Shift Position

Easily shift an indicator to a corner while preserving other transformations:



Button

What happens?

  • The indicator shifts up and right to a specific position.
  • On hover, the parent element scales while the indicator remains positioned.