Bounds

Overview

Bounds allow you to dynamically retrieve and utilize an element’s size or position in your animations or styles. These utilities make it easy to work with properties like height, width, top, bottom, left, and right, enabling you to create responsive and interactive effects.

Syntax

The general syntax for bounds retrieval follows:

Where attribute can be any of the following:

• height
• width
• top
• bottom
• left
• right

The best way to use the variables is to store them in the variable like $height(get(height)).

Examples

height

In this example, the first element retrieves its height using get(height) and stores it in the $height variable. When the hover:translateX($height) trigger is activated, the $height variable is replaced with the actual height value retrieved earlier. As a result, the element translates horizontally by an amount equal to its height when hovered (44px)

Similar to the previous example, $height(get(height)) retrieves the element’s height and stores it in the $height variable. Then, width($height) applies the stored height value to set the element’s width, making it equal to its height. In this case, the height of an element is 32px, so the width is also set to 32px.

width

In this example, the element retrieves its width using get(width) and stores it in the $width variable. On hover, the hover:translateX($width) trigger applies the stored value, moving the element horizontally by its width.

Here, the $width(get(width)) retrieves the element’s width and stores it in the $width variable. The height($width) property then uses this value to set the element’s height, making it equal to its width.

Accordion example

You can use TorusKit utilities such as Variables and References to create a simple accordion component.

Available attributes