Overview
This effect hides an element by clipping it using CSS clip-path
and reveals it when trigger is performed. The element itself stays in the original place, only
the mask is animated. When the element is masked, the clipping box has a 0%
height or width and the element is entirely hidden without any possible user interaction such as hover
or focus
.
Example
Example of gradual masking effect on heading title. Made with mask--right
and delay[{value}]
.
Hover me
Masking effect made super easy with Torus Kit
<div data-fx-trigger="hover">
<h2>
<span class="d-block"><span data-fx="hover/T:mask--right exponential">Masking effect</span></span>
<span class="d-block"><span data-fx="hover/T:mask--right exponential delay[100ms]">made super easy</span></span>
<span class="d-block"><span data-fx="hover/T:mask--right exponential delay[200ms]">with Torus Kit</span></span>
</h2>
</div>
Triggers
To animate the mask when {trigger}
is performed on a single element, use data-fx="{trigger}:mask--{direction}
where {trigger}
is:
inview:
- when element appears in the viewport and gets.inview
classactive:
- when element gets.active
classshow:
- when element gets.show
class
And the {direction}
one of the:
up
mask reveals upwards from bottom to topdown
mask reveals downwards from top to bottomleft
mask reveals from the right to the leftright
mask reveals from the left to the right
clip-path
hides entire element, it doesn’t respond to user hover
interaction. This is why hover:
(hover) trigger is not available.
Parent trigger
To animate the mask of a single or multiple child elements when {trigger}
is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover}
to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.
Than add data-fx="{TRIGGER}:mask--{direction}
attribute to child elements where {TRIGGER}
is:
inview/T:
- when.inview
class is applied on parent Trigger element, because it’s visible in the viewportactive/T:
- when.active
class is applied on parent Trigger elementshow/T:
- when.show
class is applied on parent Trigger elementhover/T:
- whenhover
state is applied on parent Trigger element
And the {direction}
one of the:
up
mask reveals upwards from bottom to topdown
mask reveals downwards from top to bottomleft
mask reveals from the right to the leftright
mask reveals from the left to the right