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 reveal is animated. When the element is revealed, 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
Reveal
Example of gradual revealing effect on heading title on hover
. Made with reveal--up
and delay[{value}]
.
Hover me
Revealing effect made super easy with Torus Kit
<div data-fx-trigger="hover">
<h2>
<span class="d-block"><span data-fx="hover/T:reveal--up exponential">Revealing effect</span></span>
<span class="d-block"><span data-fx="hover/T:reveal--up exponential delay[100ms]">made super easy</span></span>
<span class="d-block"><span data-fx="hover/T:reveal--up exponential delay[200ms]">with Torus Kit</span></span>
</h2>
</div>
Reversed
Reversed gradual reveal effect that hides the content.
Hover me
Hiding effect made super easy with Torus Kit
<div data-fx-trigger="hover">
<h2>
<span class="d-block"><span data-fx="hover/T:reveal-reverse--up exponential">Revealing effect</span></span>
<span class="d-block"><span data-fx="hover/T:reveal-reverse--up exponential delay[100ms]">made super easy</span></span>
<span class="d-block"><span data-fx="hover/T:reveal-reverse--up exponential delay[200ms]">with Torus Kit</span></span>
</h2>
</div>
Triggers
To create a revealing effect when {trigger}
is performed on a single element, use data-fx="{trigger}:reveal--{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
reveals upwards from bottom to topdown
reveals downwards from top to bottomleft
reveals from the right to the leftright
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.
Reveal
Reversed
Add data-fx="{trigger}:reveal-reverse--{direction}
that reverse the effect and hide the content.
Parent trigger
To create a revealing effect 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}:reveal--{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
reveal reveals upwards from bottom to topdown
reveal reveals downwards from top to bottomleft
reveal reveals from the right to the leftright
reveal reveals from the left to the right