What is Torus Kit

Torus Kit is a complete toolbox for creating interactions and effects without writing any CSS/JS. With its simple, semantic markup, Torus Kit allows you to create simple or complex transitions just as you are writing your typical HTML code. You don’t need any advanced knowledge of CSS or JavaScript to use the Torus Kit.

It also brings new components and utilities, and enhances the existing Bootstrap ones, that helps you to minimize creating and repeating CSS/JS work. Read more about the Components and Utilities.

Effects

The biggest benefit of Torus Kit is that it combines multiple interaction triggers into one complex library. It means that you can create transitions that react to various user-based interactions such as hover, scroll, mouse move or even motion sensor orientation! You can also create effects that are triggered when element becomes visible in the viewport or it gets active class - this can be used especially in combination with Bootstrap components that uses dynamically generated .active and .show classes.

Simple syntax

The example of Torus Kit syntax with trigger and effect definition:

<!-- On `hover`, make element to `scale` from `50%` -->
<div data-tor="hover:scale.from(50%)"></div>
<!-- On `scroll`, make element to `scale` from `50%` to `100%` -->
<div data-tor="scroll:@transform=scale(0.5; 1)"></div>

Responsive effects

The powerful responsive ability allows you to fine-tune the effect for various resolutions. You can set the different effect values based on Bootstrap breakpoints, or even disable the effect on defined resolutions.

This example shows how to create responsive scale (or grow) animation when user hovers the element.

<!-- On `hover`, make element to `scale` to `125%`, but `scale` to `150%` on `XL` resolution -->
<div data-tor="hover:scale.to(125% xl::150%)"></div>

Animate any CSS property

User-driven triggers such as hover, scroll, mouse move and sensor orientation, can be used to animate any CSS property (if property allows it) even as combination.

<!-- On `scroll`, change the `opacity` from `0` to `1` and change `border-radius` to `50px`-->
<!-- and change the `background-color` based on mouse move-->
<div data-tor="scroll:[@opacity(0;1) @border-radius(0px; 50px)] mouse:@background-color(rgb(...0,0,255); rgb(...255,0,0))"></div>

Parent triggers

With the data-tor-parent attribute, it’s easy to animate multiple nested child elements when the parent element gets hover state, gets .active / .show class or it becomes visible in the viewport. With the Delay modifier, you can create complex gradual animations of child elements, when parent element runs one of the triggers.

<!-- On `hover`, make element to `scale` to `125%`, but `scale` to `150%` on `XL` resolution -->
<div data-tor-parent="hover">
  <div data-tor="hover(p):scale.from(75%)"></div>
  <div data-tor="hover(p):scale.from(75%) delay(100ms)"></div>
  <div data-tor="hover(p):scale.from(75%) delay(200ms)"></div>
</div>

Group effects

Define the effects for multiple elements from one place with Group effects. This is especially useful when you have many nested elements and defining effects for every single one becomes too complex. The data-tor-group placed on parent element also allows you to use powerful Incrementing feature. This will increment, decrement or set random value of the effect on every element in the defined group.

<!-- For every `.fx` element, set `inview:scale.from(0)` and increment `delay` by `100ms` -->
<div data-tor-group=".fx => inview:scale.from(0) delay(/+100ms/) inview:revert slow;">
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
</div>

Loops

Loops are great for catching the user attention. Torus Kit brings various, predefined animated CSS loops. Unlike the Effects, loops are animated using CSS @keyframe and with infinite animation-count.

<!-- Wobble horizontal -->
<div data-tor="loop:wobble.h"></div>
<!-- Float vertical -->
<div data-tor="loop:float"></div>