Group effects How to use
Learn how to add multiple effects to multiple elements from one place
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-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-tor-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-tor-fx-group
, but they needs to be separated by semicolon ;
: data-tor-fx-group="<target1> => <effects1>; <target2> => <effects2>; ..."
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-fx-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-fx-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-fx-trigger
trigger.
<div data-tor-fx-group=".fx => inview-T:reveal.up hover:scale.to(125)" data-tor-fx-trigger="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-fx-trigger="hover" data-tor-fx-group="
.fx => hover-T:mask.circle delay(/0+50ms/) quad slow;
.number => hover-T:pull.up(sm) 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>