Built in Triggers Combination

Combine multiple triggers to create interactive effect animations

Overview

You are not limited when it comes to combining multiple triggers with different states together. You can mix inview:, active:, show:, hover:, inview(p):, active(p):, show(p): or hover(p): triggers together to launch different effects in different situations.

Although you can combine triggers together, some effects may produce unexpected behavior. For example block and reveal effect uses CSS clip-path a little bit different way, so they are not fully compatible.

Example

Example below combines hover(p): (parent trigger hover), active(p): (parent trigger active class), and two hover: (element hover) triggers together in one data-tor attribute. This creates an effect with these behavior:

  • hover(p):fade.in (on trigger hover) will fade in an element from opacity: 0 to opacity: 1 on parent element hover
  • active(p):scale.from(75%) (on trigger active class) will scale up an element from scale: 0.75 to scale: 1 when parent element gets .active class
  • hover:push.up(sm) (on element hover) will move up an element from translateY: 0 to translateY: -1rem on element hover
  • hover:shadow(risen) (on element hover) will add a shadow to an on element hover

Hover and click the parent trigger, then hover the single element

Example
<div data-tor="hover(p):fade.in active(p):scale.from(75%) hover:push.up(sm) hover:shadow(risen)">Example</div>