Built in How to use

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-tor="<trigger>:<effect>"

You add more effects into one data-tor attribute and combine them.

Let’s dive into the syntax:

• data-tor - 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-tor="<trigger-name>:" with these variants:

• inview: - when element appears into viewport and gets the .inview class
• active: - when element gets the .active class
• show: - when element gets the .show class
• hover: - when user performs hover over the element

The colon followed after the <trigger-name> is required.

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(xs) effect that translate the element over the Y axis up by 1rem.

<div class=“btn btn-primary” data-tor=“hover:push.up(xs)”>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(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=“inview:scale.from(0) hover:push.up(xs) inview:revert”>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-tor-parent="<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 after the trigger name:

• inview(p): - launch the transition when a trigger element appears into viewport and gets the .inview class
• active(p): - launch the transition when a trigger element gets the .active class
• show(p): - launch the transition when a trigger element gets the .show class
• hover(p): - 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-tor-parent="hover">
  <div data-tor="hover(p):fade.in">Fade in</div>
  <div data-tor="hover(p):push.up(xs)">Push up</div>
  <div data-tor="hover(p):scale.from(75%)">Grow small</div>
  <div data-tor="hover(p):reveal(up)">Reveal</div>
</div>

Combinations

You can combine multiple parent triggers on one element to create a desired effects. This example combines active(p) (trigger gets .active class) with hover(p) (trigger hovered). Click the bordered parent trigger to see it in action.

<div data-tor-parent="hover">
  <div data-tor="active(p):scale.from(0) hover(p):fade.in">Grow & fade</div>
  <div data-tor="active(p):clip(right) hover(p):push.up(xs)">Block & push</div>
  <div data-tor="active(p):fade.in hover(p):scale.from(75%)">Fade & grow</div>
  <div data-tor="active(p):reveal(up) hover(p):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>(<value>, {<options>}). Here’s the syntax explanation:

• <name> - is the main title of the effect. Example: clip
• <direction> - defines the further effect specification if applicable. Example: Example: push.up, fade.in
• (<value>) - if effect supports it, defines its value. Example: push.up(xs), opacity(50%)
• {<options>} - some effects supports user defined options. Example: clip(right, {skew: 2rem})

<name>

Defines the main purpose of the effect. Example: fade, opacity, reveal, bg

<direction>

Almost every effect is divided into more specific ones. Direction definition has to start with a dot ,. Example: fade.in, push.up, reveal(down), scale.from

<(value)>

Almost all effects supports predefined or custom (<value>). Value has to be defined between the parentheses. Example: push.up(sm), scale.from(0)

If the effects supports it, you can define additional options. Options are defined similar to JS languages by adding , {<options>} to effect parentheses. The option definition act as objectin JavaScript, so to define one or multiple options use this syntax: <effect>(<value>, {option1: value1, option2: value2 ...}).

Example

This example below shows how to use effects with <direction>, (<modifier>) and <__option[value]>.

<div data-tor-parent="hover">
  <div data-tor="hover(p):fade.out">Fade out</div>
  <div data-tor="hover(p):scale.from(75%)">Grow out</div>
  <div data-tor="hover(p):block(right, {bg: --bs-secondary})">Block right</div>
</div>

Combinations

You can combine multiple effects to achieve a desired appearance.

<div class="btn btn-primary" data-tor="inview:scale.from(0) hover:bg-darken(md) inview:revert">Grow & darken</div>
<div class="btn btn-primary" data-tor="hover:scale.from(75%) hover:shadow(risen) moz-subpixel">Grow out & shadow</div>