Group & Stagger animations

Define the animations from one place and create a staggered cascading effects with minimum effort

Overview

Often, you need to apply the same or slightly varied CSS animation to multiple elements or create a cascading reveal effect with CSS. The powerful data-tor-group attribute allows you to define animations in one place and pass them to child elements. Using the stagger utility (//), you can increment or decrement values for each child element, creating a smooth staggered cascading animation effect.

Syntax

To create a group of effects, use the data-tor-group attribute on the parent element. Then target the desired child elements with the {selector}, and apply one or multiple property definitions to them using an apply operator (=>). Separate each selector definition with a semicolon (;).

How it works

The data-tor-group utility gets all child element that matches the selector, and apply the data-tor attribute with defined effects to each one of them.

Selectors

Selectors are used to target the child elements from the parent. These are standard selectors used in querySelector() function.

Element selector

The element selector targets child elements by selecting the specific HTML element (tag). For example, using div => ... will select all inner <div> elements—regardless of their classes or other attributes—and apply background-color(#0000ff) to them.


One

Two

Three

Class selector

The class selector targets child elements by selecting elements with a specific class. For example, using .item => ... will select all inner <div> elements with an .item class and apply opacity(0.5) to them.


One

Two

Three

Id selector

The id selector targets one child element by selecting element with a specific id attribute. For example, using #two => ... will select only the element with an id="two" and apply scale(0.75) in this case. You use define multiple selectors in one data-tor-group.


One

Two

Three

Attribute selector

The attribute selector targets child elements by selecting elements with a specific attribute. For example, using [data-type] => ... will select all inner elements with the data-type attribute and apply opacity(0.5) to them.

You can use more specified attribute selector with syntax like [data-type='car'].


One

Two

Three

Combination

The data-tor-group utility allows you to create and combine as many definition as you need. In this case, the .item => ... will select all elements with the .item class. The more specific .fx-1 => ... will select only the element with the exact .fx-1 class. The [data-type='apple'] just targets only the the element which data-type attribute equals to an apple;


One

Two

Three

Animations

The most powerful feature of the data-tor-group utility is its ability to create a single animation definition that applies to all desired child elements. Combined with the stagger feature, it allows for creating cascading effects in a simple and intuitive way.

Group animation

Create a one effect definition and apply it to the group of child elements. Read more about the Group animations.


One

Two

Three

Stagger animation

Using the stagger utility (//), you can create cascading effects, as shown in this example. The delay: /+100/ms setting means that the delay will increase by 100 milliseconds for each subsequent element, starting from 0. Read more about the Stagger animations.


One

Two

Three