Group effects How to use

Overview

Torus Kit group effects is a powerful tool that allows you to define one or multiple effect for multiple targets from one place. It’s very useful especially when you have several same elements and you want to apply the same effects on each one. Instead of defining the effect on every element, you can use data-tor-group on parent wrapper element, where you define a child target elements with the effects you want to apply. The script then loop through all defined child targets and apply a given effect.

Syntax

Add this attribute to the parent wrapper element data-tor-group="<target> => <effects>;", where:

• <target> - the target child element where the effect has to be applied. Example: .item, .list a, #navigation
• <effects> - one or multiple effects that has to be applied to the target

Examples

Basic example

Here’s the very basic example of how to add an inview:scale.from(0) effect to several .fx elements. This effects makes them to scale up when they become visible in the viewport.

<div data-tor-group=".fx => inview:scale.from(0);">
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
</div>

Multiple effects

No problem when you need multiple effects. In this case inview:scale.from(0) will scale up and inview:fade.in will smoothly change the transparency of the element when it become visible in the viewport. The hover:push.up(sm) will move it upwards a little when it gets :hover state, and the slow will make the transition speed slower - the effect has longer duration.

<div data-tor-group=".fx => inview:scale.from(0) inview:fade.in hover:push.up(sm) slow;">
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
</div>

Parent trigger

Group effects can be also used on parent data-tor-parent trigger.

<div data-tor-group=".fx => inview(p):reveal(up) hover:scale.to(125%);" data-tor-parent="inview">
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
  <div class="fx"></div>
</div>

Advanced example

This example shows how to add multiple effects to multiple, even nested elements. Each group is separated by semicolon ;. You can see that delay(/0+50ms/) uses 0+50ms syntax, which will increment the delay by 50ms on each element. Read more in Incrementing.

<div data-tor-parent="hover" data-tor-group="
    .fx     => hover(p):clip.circle delay(/0+50ms/) quad slow;
    .number => hover(p):pull.up(sm) hover(p):fade.in bounce slow wait(200ms) delay(/0+50ms/);
  ">
  <div class="fx">
    <div class="number">01</div>
  </div>
  <div class="fx">
    <div class="number">02</div>
  </div>
  <div class="fx">
    <div class="number">03</div>
  </div>
  <div class="fx">
    <div class="number">04</div>
  </div>
  <div class="fx">
    <div class="number">05</div>
  </div>
</div>