We’ve prepared some of the most used CSS effects into Torus Kit for easy usage. These effects are very versatile and can be combined together to create whole new ones. Because they are already predefined, there no need to write any CSS, but you can still modify some of the effect’s attributes right in the HTML code.
The main idea of Torus Kit is One file for all effects. You define the effects right in the HTML code without any CSS, so there’s no need to create a new styles for every new effects and assign them to different classes.
To apply an effect on element, add this attribute:
You add more effects into one
data-tor-fx attribute and combine them.
Please note, that not all effects are fully combinable. Sometimes you need to nest one element with effect into another.
Let’s dive into the syntax:
data-tor-fx- the main
data-attribute that stores all effect definitions
<trigger>- choose which trigger fires the effect transition (animation). Check the Triggers and Parent triggers section for more
<effect>- the effect itself. Check the Effects section for more
.show classes as a triggers, because these classes are used by Bootstrap to define the state of it’s components. So it’s easy to integrate them with a Torus Kit effects.
Triggers launches the
<effect> CSS transition on various actions. These actions can be user action based (hover), class based (element gets corresponding class) or viewport based (element is in viewport).
Triggers are defined by
data-tor-fx="<trigger-name>:" with these variants:
inview:- when element appears into viewport and gets the
active:- when element gets the
show:- when element gets the
hover:- when user performs hover over the element
The colon followed after the
<trigger-name> is required.
This example shows how to create a push up effect when user hovers over the element. We’re using
h trigger that launch the effect on hover and
push.up(xs) effect that translate the element over the Y axis up by
<div class=“btn btn-primary” data-tor-fx=“hover:push.up(xs)”>Push up button</div>
You can combine the triggers to launch different effects on different situations. This example shows how to combine two triggers to create a grow effect when element appears into viewport (and gets
.inview class) and
push.up(xs) effect on hover as mentioned above. Scroll out and than back to see how button grows when appears in the viewport. The
inview-reset[true] option removes the
.inview class when the element is out of the viewport and “reset” it back to initial state.
<div class=“btn btn-primary” data-tor-fx=“inview:scale.from(0) hover:push.up(xs) inview-reset[true)”>Grow and push up button</div>
Similar to triggers mentioned above, parent triggers also launches the transition when they’re performed. The main difference is that the effect is launched when the trigger is performed on the parent element. This is very handy when you have multiple elements and you want to animate them together from the one place.
In order to work properly, you need to define what is a parent trigger by adding a
data-tor-fx-trigger="<trigger-definition>" attribute to the parent element. A
<trigger-definition> defines the trigger performed on parent element, that launches the effect transition of inner child elements. These
<trigger-definitions> are available:
inview- launch the effect on child elements when the trigger is in viewport and gets
active- launch the effect on child elements when the trigger gets
show- launch the effect on child elements when the trigger gets
hover- launch the effect on child elements when the trigger gets hover state
Next step is to define the effect itself. The syntax is very similar to single triggers, except that you need to add a T letter after the trigger name:
inview-T:- launch the transition when a trigger element appears into viewport and gets the
active-T:- launch the transition when a trigger element gets the
show-T:- launch the transition when a trigger element gets the
hover-T:- launch the transition when a trigger user performs hover over the element
This example shows how to create and launch various effects based parent trigger hover state. Try to hover over the bordered parent element ans see how the effects are launched together.
<div data-tor-fx-trigger="hover"> <div data-tor-fx="hover-T:fade.in">Fade in</div> <div data-tor-fx="hover-T:push.up(xs)">Push up</div> <div data-tor-fx="hover-T:scale.from(75)">Grow small</div> <div data-tor-fx="hover-T:reveal.up">Reveal</div> </div>
You can combine multiple parent triggers on one element to create a desired effects. This example combines
active-T (trigger gets
.active class) with
hover-T (trigger hovered). Click the bordered parent trigger to see it in action.
Click this trigger
<div data-tor-fx-trigger="hover"> <div data-tor-fx="active-T:scale.from(0) hover-T:fade.in">Grow & fade</div> <div data-tor-fx="active-T:mask.right hover-T:push.up(xs)">Block & push</div> <div data-tor-fx="active-T:fade.in hover-T:scale.from(75)">Fade & grow</div> <div data-tor-fx="active-T:reveal.up hover-T:turn(45deg)">Reveal & turn</div> </div>
Torus Kit provides several build-in effects that helps you to create interactive websites without a need to write any additional CSS code. These effects are based on CSS transitions, so they have to states:
- initial - idle state with initial CSS values. Example:
fade.ineffect has initial state of
- active - when trigger has launched the effect. Example:
fade.ineffect has active state of
When the effect lose an active state (hover, active class or is out of a viewport), it automatically reverts back to initial state with smooth transition.
Here’s how the full syntax looks:
<name>.<direction>(<modifier>)__option(<value>). Here’s the syntax explanation:
<name>- is the main title of the effect. Example:
<direction>- defines the further effect specification. Example: Example:
(<modifier>)- if effect supports it, defines its modification. Example:
__option(<value>)- some effects supports user defined options. Example:
Defines the main purpose of the effect. Example:
Almost every effect is divided into more specific ones. Direction definition has to start with a dot
Some effects can be modified by adding a
(<modifier>) after the effect name. Modifier has to be defined between the parentheses. Example:
If the effects supports it, you can define additional option. Every option is define by double underscore
__ followed with the
option name. The option value has to be placed into parentheses
This example below shows how to use effects with
<div data-tor-fx-trigger="hover"> <div data-tor-fx="hover-T:fade.out">Fade out</div> <div data-tor-fx="hover-T:scale.from(75)">Grow out</div> <div data-tor-fx="hover-T:block.right__block(secondary)">Block right</div> </div>
You can combine multiple effects to achieve a desired appearance.
<div class="btn btn-primary" data-tor-fx="inview:scale.from(0) hover:bg-darken(md) inview-reset[true)">Grow & darken</div>
<div class="btn btn-primary" data-tor-fx="hover:scale.from(75) hover:shadow(risen)">Grow out & shadow</div>