Torus Kit How to use PRO
Learn how to use and integrate Torus Kit built-in effects into your Bootstrap project
Overview
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: data-fx="{trigger}:{effect}"
. You add more effects into one data-fx
attribute and combine them.
Let’s dive into the syntax:
data-fx
- the maindata-
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
We’re using .active
and .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
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).
Syntax
Triggers are defined by data-fx=""{trigger}{effect}
using these shorthands:
inview:
- (inview) - when element appears into viewport and gets the.inview
classactive:
- (active) - when element gets the.active
classshow:
- (show) - when element gets the.show
classhover:
- (hover) - when user performs hover over the element
Example
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
effect that translate the element over the Y axis up by 1rem
.
<div class="btn btn-primary" data-fx="hover:push--up">Push up button</div>
Combinations
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
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-fx="inview:grow hover:push--up inview-reset[true]">Grow and push up button</div>
Parent triggers
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.
Syntax
In order to work properly, you need to define what is a parent trigger by adding a data-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.inview
classactive
- launch the effect on child elements when the trigger gets.active
classshow
- launch the effect on child elements when the trigger gets.show
classhover
- 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 before the trigger shorthand and write it all in capital letters:
inview/T
- (Trigger InView) - launch the transition when a trigger element appears into viewport and gets the.inview
classactive/T
- (Trigger Active) - launch the transition when a trigger element gets the.active
classshow/T
- (Trigger Show) - launch the transition when a trigger element gets the.show
classhover/T
- (Trigger Hover) - launch the transition when a trigger user performs hover over the element
Example
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-fx-trigger="hover">
<div data-fx="hover/T:fade--in">Fade in</div>
<div data-fx="hover/T:push--up">Push up</div>
<div data-fx="hover/T:grow--small">Grow small</div>
<div data-fx="hover/T:reveal--up">Reveal</div>
</div>
Combinations
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-fx-trigger="hover">
<div data-fx="active/T:grow hover/T:fade--in">Grow & fade</div>
<div data-fx="active/T:block--right hover/T:push--up">Block & push</div>
<div data-fx="active/T:fade--in hover/T:grow--small">Fade & grow</div>
<div data-fx="active/T:reveal--up hover/T:turn[45deg]">Reveal & turn</div>
</div>
Effects
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--in
effect has initial state ofopacity: 0
- active - when trigger has launched the effect. Example:
fade--in
effect has active state ofopacity: 1
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.
Syntax
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.{--direction}
- defines the further effect specification.{--modifier}
- if effect supports it, defines its modification{__option[value]}
- some effects supports user defined options
{name}
Defines the main purpose of the effect. Example: fade
, shrink
, reveal
, bg-color
{--direction}
Almost every effect is divided into more specific ones. Direction definition has to start with a double dash --
. Example: fade--out
, shrink--in
, reveal--down
, bg-color--primary
{--modifier}
Some effects can be modified by adding a {--modifier}
at the end. Similar to direction, modifier is also defined by double dash. Example: fade--out--small
, grow--out--small
{__option[value]}
If the effects supports it, you can define addition option. Every option is define by double underscore __
and option value has to be placed into brackets [{value}]
. Example: block--right__bg[white]
Example
This example below shows how to use effects with {--direction}
, {--modifier}
and {__option[value]}
.
<div data-fx-trigger="hover">
<div data-fx="hover/T:fade--out">Fade out</div>
<div data-fx="hover/T:grow--out--small">Grow out</div>
<div data-fx="hover/T:block--right__bg[secondary]">Block right</div>
</div>
Combinations
You can combine multiple effects to achieve a desired appearance.
<div class="btn btn-primary" data-fx="inview:grow hover:bg-darken--5 inview-reset[true]">Grow & darken</div>
<div class="btn btn-primary" data-fx="hover:grow--out--small hover:shadow--risen">Grow out & shadow</div>