Cluster

Grouping properties with shared triggers

Overview

Clusters allow you to group multiple properties under a single shared trigger. Instead of defining a trigger for each property individually, you specify one common trigger for the entire group. This simplifies your code, especially when managing multiple animations or styles with the same trigger.

Benefits of Clusters

  1. Shared Trigger: Define a single trigger for all properties in the group, reducing redundancy.
  2. Options Inheritance: Set parent options (e.g., duration, easing) that are automatically inherited by all properties within the cluster.

Clusters are defined using square brackets [ ] to group the properties. Inside the brackets, you specify the properties, values, and options.

Syntax

The syntax for clusters includes a trigger, a group of properties inside square brackets [ ], and an optional shared options block < >:

  • Trigger: The event that activates the cluster (e.g., hover, click).
  • Properties: The properties inside the cluster (e.g., scale, rotate).
  • Options: Common options for all properties in the cluster (e.g., duration, easing).

Examples

Basic Example

This example demonstrates a cluster where scale and rotate share the same hover trigger and options (duration: 2s, easing: spring):

Hover

When you hover over the element:

  • It scales to 1.25 times its size.
  • It rotates by 45 degrees.
  • All properties inherits the duration: 2s and easing: spring options

Option inheritance

You can also override inherited options for individual properties within the cluster:

Hover
  • The scale property inherits duration: 2s and easing: spring.
  • The rotate property overrides these options with duration: 1s and easing: linear.