Custom Other CSS properties

Style any available CSS property

Overview

With Torus Kit you can create interactive animations from any available CSS property, not just the ones that we’ve mentioned in the documentation so far. You can check the Animatable CSS properties for the complete list.

Syntax

Use data-tor="<trigger>:@<css-property>(<start>;<end>) to animate the <css-property> on given <trigger>. The <start> value represents the beginning value, while the <end> is the finish value.

Examples

The <mouse> examples uses {method: start} for more natural behavior. Try to move the cursor from the screen top-left corner into the bottom-right, the left edge to the right one, and from the top edge into the bottom.

scroll

To change the value of CSS property when scrolling the page, use data-tor="scroll:@<css-property>(<amount>)".

border-radius
width
<div data-tor="scroll:@border-radius(0px;50px)">border-radius</div>
<div data-tor="scroll:@width(3rem;10rem)">width</div>

mouse

To change the value of CSS property when moving the cursor over both x and y axis, use data-tor="mouse:@<css-property>(<amount>)".

border-radius
width
<div data-tor="mouse:@border-radius(0px;50px, {method: start})">border-radius</div>
<div data-tor="mouse:@width(3rem;10rem, {method: start})">width</div>

mouseX

To change the value of CSS property when moving the cursor over x axis, use data-tor="mouseX:@<css-property>(<amount>)"

border-radius
width
<div data-tor="mouseX:@border-radius(0px;50px, {method: start})">border-radius</div>
<div data-tor="mouseX:@width(3rem;10rem, {method: start})">width</div>

mouseY

To change the value of CSS property when moving the cursor over y axis, use data-tor="mouseY:@<css-property>(<amount>)"

border-radius
width
<div data-tor="mouseY:@border-radius(0px;50px, {method: start})">border-radius</div>
<div data-tor="mouseY:@width(3rem;10rem, {method: start})">width</div>