Clustering

Assign one trigger to multiple effects using cluster and make your markup shorter and cleaner

Overview

When you need to create multiple effects with the same trigger, you have to write a lot of code such as:

hover:opacity(80%) hover:scale.to(125%) hover:push.up(xs)

With the clustering, you wrap the markup into the brackets [] and define only one trigger. The markup from the previous example will be:

hover:[opacity(80%) scale.to(125%) push.up(xs)].

Syntax

All effects definitions must be inside brackets []. The syntax is as follows: <trigger>:[<effects>] where:

  • <trigger> desired trigger such as hover:, inview(p), etc.
  • <effects> one or multiple effects without the trigger

Example

We’ll use the example from the Overview to show how the clustering works:

Hover me
<div data-tor="hover:[opacity(80%) scale.to(125%) push.up(xs)]"></div>

<!-- The generated code will be -->
<!-- data-tor="hover:opacity(80%) hover:scale.to(125%) hover:push.up(xs)" -->