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-fx
attribute. This creates an effect with these behavior:
hover/T:fade--in--small
(on trigger hover) will fade in an element fromopacity: 0.8
toopacity: 1
on parent element hoveractive/T:grow--small
(on trigger active class) will scale up an element fromscale: 0.8
toscale: 1
when parent element gets.active
classhover:push--up
(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 elements
Example
<div data-fx="hover/T:fade--in--small active/T:grow--small hover:push--up hover:shadow--risen">Example</div>