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


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: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%) push.up(xs)].


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


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

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

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