What is Torus Kit
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
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>
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
<!-- 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>
data-tor-parent attribute, it’s easy to animate multiple nested child elements when the parent element gets hover state, gets
.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>
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>
<!-- Wobble horizontal --> <div data-tor="loop:wobble.h"></div> <!-- Float vertical --> <div data-tor="loop:float"></div>