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-T:
, active-T:
, show-T:
or hover-T:
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-T:
(parent trigger hover), active-T:
(parent trigger active class), and two hover:
(element hover) triggers together in one data-tor-fx
attribute. This creates an effect with these behavior:
hover-T:fade.in
(on trigger hover) will fade in an element fromopacity: 0
toopacity: 1
on parent element hoveractive-T:scale.from(75)
(on trigger active class) will scale up an element fromscale: 0.75
toscale: 1
when parent element gets.active
classhover:push.up(sm)
(on element hover) will move up an element fromtranslateY: 0
totranslateY: -1rem
on element hoverhover: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-fx="hover-T:fade.in active-T:scale.from(75) hover:push.up(sm) hover:shadow(risen)">Example</div>