Group animations

Overview

The group animation feature allows you to create an effect definitions in the data-tor-group attribute on parent element, which is then applied to group of multiple inner child elements. In other words, you create a definition that is shared across elements, without the need to manually set the effect for each individual one. TorusKit will loop trough them and automatically initialize the effect.

Syntax

Use the data-tor-group attribute on the parent element with the {selector} => properties; syntax. The {selector} targets your desired child elements inside the parent one, where the apply operator (=>) applies the given properties. You can apply multiple properties and triggers to one element. The data-tor-group attribute also allows you use a different selectors to target different child elements separated by semicolon (;).

Note: Separate each {selector} => properties; definition with a semicolon (;)

Examples

These examples shows how easy is to apply the animation into a different elements.

Basic animation

In this case, we are just targeting all child div elements without any specifications. TorusKit will loop trough each of them and apply the animate:translateX(...) effect.

Multiple triggers

One selector may contain even multiple definitions. In this example, the animate , hover and active triggers with their corresponding properties will be applied to all div elements inside.

Different targets

You are not limited to select the only one type of element. Target as many elements as you need using just one data-tor-group attribute. For instance, the div => animate:translateX(...); in this example will select all div elements and apply the translateX animation on them. This makes them moving in a loop. On the other hand, the .one => animate:scale(...); will select only an element with the .one class. The same applies for the .two => hover:opacity(...);. The last #three => background-color(...); selects only the element with an id="three".