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-fx-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-fx-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
You can have several definition in one data-fx-group, but they needs to be separated by semicolon ;: data-fx-group="{target1} => {effects1}; {target2} => {effects2}; ..."
Examples
Basic example
Here’s the very basic example of how to add an inview:grow effect to several .fx elements. This effects makes them to scale up when they become visible in the viewport.
<div data-fx-group=".fx => inview:grow">
<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:grow 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 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-fx-group=".fx => inview:grow inview:fade--in hover:push--up 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-fx-trigger trigger.
<div data-fx-group=".fx => hover/T:reveal--up hover:grow--out--small" data-fx-trigger="hover">
<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-fx-trigger="hover" data-fx-group="
.fx => hover/T:mask--circle delay[(0+50ms)] quad slow;
.number => hover/T:pull--up hover/T: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>