Stagger animations

Overview

The stagger utility helps you to create a cascade effects by modifying a values of each element in a loop. In other words, when you want to create a progressively revealing effect, where each of them has slightly longer delay that the previous one, choose a stagger.

Syntax

Stagger is part of the group animations utility and uses the same data-tor-group attribute. It’s defined by a double slash (//), followed by an operator—increasing, decreasing, or random—and the value to be modified in the format /{+|-}{value}/{unit} or /random({value})/{unit}, with unit defined outside the stagger. You can use this when a numeric value needs to be adjusted.

By default, stagger starts counting from 0. For example, if you use translateX(/+1/rem), the first element in a sequence will have translateX(0rem), the next translateX(1rem), and so on until the last element.

You can change the stagger’s starting value by placing it before the stagger operator. For instance, updating the previous example to translateX(/5,+1/rem) means the stagger now starts at 5 and increases by 1 for each element. The resulting values will be 5rem, 6rem, 7rem, and so forth.

Note: Only modify the numeric part of the value. For example, if you want to increase the delay by 50ms for each element, set the delay: /+50/ms instead of /+50ms/—do not include the ms unit in the stagger.

Basic usage

You can even use the stagger for a static CSS styling, like you would do with a Bootstrap or Tailwind. Instead of manually setting styles on each element, stagger allows you to define a single style rule that applies progressively to each item in a sequence.

Syntax

In the example below, we apply staggered effects to a group of div elements:

What This Code Does

1. The data-tor-group attribute on the parent <div> tells all child div elements inside it to apply the staggered styles defined within the attribute.

2. Staggered blur effect:

• The filter(blur(/+1/px)) applies a blur effect to each child div, starting from 0px and increasing by 1px with each next element.
• This means the first div has no blur (blur(0px)), the second has blur(1px), the third has blur(2px), and so on.

3. Staggered translateX effect:

• The translateX(/-1/rem) part applies a horizontal translation starting from 0rem and decreasing by 1rem with each element.
• So, the first div is not moved (translateX(0rem)), the second moves -1rem to the left, the third moves -2rem, and the fourth moves -3rem.

Why This is Useful

This approach saves time and makes styling more flexible, especially if you add more elements later. Instead of setting individual styles for each div, you just update the staggered values in one place, and the changes automatically apply to all elements in the group.

Stagger animations

The true power of stagger is in creating visually captivating cascading CSS animations.

Increasing value

In this example, TorusKit selects all div elements and apply the translateX property with gradually increasing values in*rem, starting from 0rem by default—this keeps the first element stationary. To avoid that, use the stagger start value.

Syntax

Example

Decreasing value

This example does the opposite of the previous one. TorusKit will gradually decrease the translateX value by 1rem for each element, starting from 0rem.

Syntax

Example

Random value

The /random({range})/ stagger utility allows you to set the random value within the interval of start (optional) and end value to each property in the element loop.

Syntax

Example

In this example, we set translateX(/random(-2,5)/rem) to create a random movement for each element. The -2 value represents the interval start, and the 5 is the interval end value. Stagger will then calculate a random value between these intervals, meaning each element will have a translateX value anywhere between -2rem and 5rem.

Stagger start value

Often, you may not want the stagger to start increasing values from 0. We’ve updated one of the example above, to make the first element move as well by adding a stagger start value of /2,+1/rem. This starts the stagger at 2rem (instead of 0rem), then adds 1rem to each next element in the sequence. The result is translateX(2rem), translateX(3rem), and so on.

Staggering option values

It is also possible to stagger the values of an option. In this example, the delay is increased by 100ms for each subsequent element in a loop.

Examples

Here are some advanced examples of the possibilities offered by the TorusKit Stagger utility.

Cascade grow

Adding a delay: /+100/ms option makes each element scale progressively from the default 0.5 to a value of 1.

Inview revealing

Here’s a popular fade and reveal on scroll effect using a stagger. We’re using the same delay: /+100/ms option as in the previous example, but now we’ve added an initial translateY(3rem) to make the element start below, and opacity(0) to make it faded initially. Then, the Inview trigger moves the element to 0rem and sets the opacity to 1.

Parent element hover

You can start a cascading animation of elements by hovering over a different element on the page using the Target parameter. In this case, we’re using the parent parameter, which selects the direct parent of the desired elements and applies the hover trigger to it.

Hover the blue box to see the effect.