Group effects Incrementing

Overview

The incrementing feature helps you to quickly define and increment effect’s value. This is useful when you have several elements where you want to apply an effect with a different (incremented) value for each element. Incrementing will help you especially when you want to create a gradual revealing effects. When you define an increment/decrement, the script loops through all child target elements, and continuously increase the given value for every next effect.

Syntax

This is a full syntax data-tor-group="<target> => effect(/<start>;<end>/)", but in most cases you’ll use only an end values. Increment must be defined between the two slashes // with the +, - or ~ sign. You can use any integer or float number with the unit.

How it works

Basic example

Take this as an example: You have five child elements and you want to apply z-level(/+1px/) with incremented value on each one. The script start with the first element and give it a 1px value. Continue to second and give it a 2px incremented value. It goes on until the last, fifth element. And this is how the final result of incrementing z-level(/+1px/) looks:

1. <div data-tor="z-level(1px)"></div>
2. <div data-tor="z-level(2px)"></div>
3. <div data-tor="z-level(3px)"></div>
4. <div data-tor="z-level(4px)"></div>
5. <div data-tor="z-level(5px)"></div>

Starting value

However, there are some situations, where you don’t want to start with the incremented value. For example, if you use delay(/+100ms/), the first effect will start with the 100ms delay, but in most cases you want to start with 0ms delay. In this case, you can use begin value.

The syntax is:

effect(<begin+value>)

This will force the script to start with the begin value and only then, in the next step, increment by the given value.

It’s better to show it on the example. Let’s say we have five elements and we want to increment a delay between effects by 100ms. But now, we’ll use a begin value. The markup will be delay(/0ms+100ms/). Note the 0ms number - this tells the script to start with 0ms and then increment 100ms for each effect. This is the final result:

1. <div data-tor="delay(0ms)"></div>
2. <div data-tor="delay(100ms)"></div>
3. <div data-tor="delay(200ms)"></div>
4. <div data-tor="delay(300ms)"></div>
5. <div data-tor="delay(400ms)"></div>

Check this Delay example to see it in action.

Examples

Z-level

Here we’ve created a 3D stacked element that rotates when mouse is moving. To achieve a 3D space, we need to add some kind of z-index to each element. So we’ve used a Torus Kit z-level effect modifier that uses CSS translateZ to move an element over z axis. Along with that, we’ve applied a z-level(/+20px/) incrementing, that will increment the value of z-level by 20px for each effect.

<div data-tor-group=".fx => @--tor-translateZ(/+20px/);" data-tor="mouse:@tilt(20)">
  <div class="fx"></div><!-- z-level(20px) -->
  <div class="fx"></div><!-- z-level(40px) -->
  <div class="fx"></div><!-- z-level(60px) -->
  <div class="fx"></div><!-- z-level(80px) -->
</div>

Push

Another example of using incremental values. Here, we’re adding a custom value to the built-in (hover:push.up)(/docs/effects/built-in/variants/push-pull) effect and incrementing it by 0.5rem. The result is that each next element will move up on hover by increment of 0.5rem.

<div data-tor-group=".fx => hover:push.up(/+0.5rem/);">
  <div class="fx"></div><!-- hover:push.up(0rem) -->
  <div class="fx"></div><!-- hover:push.up(0.5rem) -->
  <div class="fx"></div><!-- hover:push.up(1rem) -->
  <div class="fx"></div><!-- hover:push.up(1.5rem) -->
  <div class="fx"></div><!-- hover:push.up(2rem) -->
</div>

Delay

Incrementing is super helpful when creating gradual effects using a delay.

<div data-tor-group=".fx => inview:scale.from(0) delay(/0+100ms/);">
  <div class="fx"></div><!-- delay(0ms)-->
  <div class="fx"></div><!-- delay(100ms)-->
  <div class="fx"></div><!-- delay(200ms)-->
  <div class="fx"></div><!-- delay(300ms)-->
  <div class="fx"></div><!-- delay(400ms)-->
</div>