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 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

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 class
• active: - (active) - when element gets the .active class
• show: - (show) - when element gets the .show class
• hover: - (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 class
• active - launch the effect on child elements when the trigger gets .active class
• show - launch the effect on child elements when the trigger gets .show class
• 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 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 class
• active/T - (Trigger Active) - launch the transition when a trigger element gets the .active class
• show/T - (Trigger Show) - launch the transition when a trigger element gets the .show class
• hover/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.

<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 of opacity: 0
• active - when trigger has launched the effect. Example: fade--in effect has active state of opacity: 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>