Pro

Introduction

Meet the powerful tool for creating stunning effects & interactions

Make your site awesome with Torus Kit effects and styles that are super easy to use. Just add data-fx="{effects}" data attribute and choose from numerous {effects} which you can even combine. These effects works also with Bootstrap .active and .show, so it is possible to animate almost all Bootstrap components.

Some usage examples of what Torus Kit can do:

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit

John Doe
Mask Effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie lacinia lorem, sed ornare augue lacinia et. Donec porta lectus ex, ultricies ultricies ipsum imperdiet vel.

Flip card

Curabitur euismod arcu est, non tincidunt est condimentum non. Vestibulum

Read More
Title

Phasellus leo nulla, porttitor quis est id, fringilla viverra tortor. Nunc quis iaculis urna. Duis faucibus, arcu ut auctor luctus

How it works

Add data-fx="{action}:" attribute to enable transitions and select the starting {action}.

Effects stared on these actions:

  • Element is hovered - when element or parent trigger gets :hover state
  • Element is activated - when element or parent trigger gets .active or .show class

Every {action} started with its initials, followed by colon : and finally by {effect}. The code looks like this:

<div data-fx="{action}:{effect}"></div>

Where {action} is one of:

  • h: - when element gets :hover state (hovered)
  • th: - when parent trigger element gets :hover state (trigger hovered)
  • a: - when element gets .active class (activated)
  • ta: - when parent trigger element gets .active or .show class (trigger activated)

And {effect} is one of:

  • block-* - reveals a hidden content with block effect
  • blur-* - blurs an element
  • fade-* - fade-in or out an element
  • mask-* - reveals a hidden content with mask effect
  • o-* - sets element opacity
  • reveal-* - reveals hidden content in one of four directions
  • rotate-* - rotates an element
  • grow-* - scales up an element
  • shrink-* - scales down an element
  • push-* - moves from default position into displaced one
  • pull-* - moves from displaced position into default one

Applying the effect

Element itself

To apply the effect on element itself use data-fx="h:{effect}" when element gets :hover, or data-fx="a:{effect}" when element gets .active class.

<div data-fx="h:push-up">Will push-up an element on its hover</div>
<div data-fx="a:push-right">Will push-right an element when it gets .active class</div>

Parent trigger

Use parent trigger element when you need to apply effects to one or multiple nested data-fx elements at once. Add data-trigger="{trigger-action}" to the parent element and data-fx="{th|ta}:" to the nested elements.

Where {trigger-action} is one of:

  • hover - when the trigger gets :hover state
  • active - when the trigger gets .active or .show class

Because this parent <div> element has data-trigger="hover", every nested data-fx with th: action will be animated on trigger :hover.

<div data-trigger="hover">
  <div data-fx="th:push-up"></div>
  <div data-fx="th:push-right"></div>
</div>


Because this parent <div> element has data-trigger="active", every nested data-fx with ta: action will be animated when trigger gets .active or .show class.

<div data-trigger="hover">
  <div data-fx="ta:push-up"></div>
  <div data-fx="ta:push-right"></div>
</div>


You can even combine hover and active action triggers to make some elements animated on trigger :hover state and some when it gets .active/.show class.

<div data-trigger="hover active">
  <div data-fx="th:push-up"></div>
  <div data-fx="ta:push-right"></div>
</div>

Examples

On hover

This example shows navigation interaction using push-right effect with h: {action} that is activated on :hover state.

<nav class="nav flex-column">
  <a class="nav-link" href="#" data-fx="h:push-right">Link</a>
  <a class="nav-link" href="#" data-fx="h:push-right">Link</a>
  <a class="nav-link" href="#" data-fx="h:push-right">Link</a>
</nav>

On active

Here is the spin effect with a: {action} that is activated when the element gets .active class.

Click the element to toggle its .active class
a:spin
<div data-fx="a:spin">a:spin</div>

On trigger hovered

Parent <div> has data-trigger="hover" which indicates, that every nested data-fx="th:{effect}" will be animated when parent gets :hover state.

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit

<div class="card card-clean w-25" data-trigger="hover">
  <div class="card-body">
    <h5>Card title</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
  <div class="card-footer">
    <a href="#" class="d-block" data-fx="th:fade-in th:pull-left">Read more</a>
  </div>
</div>

On trigger activated

Parent <div> has data-trigger="active" which indicates, that every nested data-fx="ta:{effect}" will be animated when parent gets .active or .show class.

Click the card to toggle its .active class
Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit

<div class="card card-clean w-25" data-trigger="active">
  <div class="card-body">
    <h5>Card title</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
  <div class="card-footer">
    <a href="#" data-fx="ta:fade-in ta:pull-left">Read more</a>
  </div>
</div>

Combinations

You can also use multiple effects in one data-fx attribute with multiple {action}s.

Multiple effects

Add multiple effects into one data-fx attribute. Here we’ve added h:rotate and h:grow-out that is activated on element :hover.

h:rotate h:grow
<div data-fx="h:rotate rotate-short h:grow-out grow-short">h:rotate h:grow</div>

Multiple actions

It is also possible to combine multiple {action}s like h:, a:, th: and ta:. In this example, element will grow up when the parent trigger is hovered, because it has th:grow, but independently, when the elements itself is being hovered it will change the background color thanks to h:bg-grey.

th:grow h:bg-grey
<div class="card w-25 text-center" data-trigger="hover">
  <div class="card-body p-5">
    <div data-fx="th:grow grow-short h:bg-grey">th:grow h:bg-grey</div>
  </div>
</div>

Multiple trigger actions

Add data-trigger="hover active" attribute to parent element to activate hover and active trigger action. Example below shows when you hover .card parent trigger, the nested element with data-fx attribute will grow up thanks to th:grow and then, when you click the .card parent trigger, the element will blur thanks to ta:blur.

Hover the card then click it to toggle its .active class
th:grow ta:blur
<div data-trigger="hover active">
  <div class="card-body p-5">
    <div data-fx="th:grow ta:blur">th:grow ta:blur</div>
  </div>
</div>