Built in Block reveal PRO
Create a block revealing mask effect animation on any element, image or text
Overview
This effect hides an element by clipping it using CSS clip-path
and reveals it with color block animation. The element itself is hidden and stays in the original place, only
the block is animated. When the effect is not triggered, 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 block revealing effect on heading title. Made with block--right
, __bg[{color}]
block color modifier and delay[{value}]
. This example also uses hover-fix
helper
that prevents browser from applying a :hover
immediately after page load. This causes weird behavior on some browsers that applies a :hover
state on parent element, but not on it’s pseudo-element.
Hover me
Block reveal effect made super easy with Torus Kit
<div data-fx-trigger="hover hover-fix">
<h2>
<span class="d-block" data-fx="hover/T:block--right__bg[white] exponential">Masking effect</span>
<span class="d-block" data-fx="hover/T:block--right__bg[white] exponential delay[100ms]">made super easy</span>
<span class="d-block" data-fx="hover/T:block--right__bg[white] exponential delay[200ms]">with Torus Kit</span>
</h2>
</div>
Triggers
To create a block reveal effect when {trigger}
is performed on a single element, use data-fx="{trigger}:block--{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
block reveals upwards from bottom to topdown
block reveals downwards from top to bottomleft
block reveals from the right to the leftright
block 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 create a block reveal 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}:block--{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
block reveals upwards from bottom to topdown
block reveals downwards from top to bottomleft
block reveals from the right to the leftright
block reveals from the left to the right
Modifications
Block color
Add __bg[{color}]
modification to change the block’s background color. The default color is black, but you can choose from these predefined colors: white, primary and secondary.
You can also use your own color.
<div data-fx-trigger="hover">
<div data-fx="hover/T:block--right">Default block color</div>
<div data-fx="hover/T:block--right__bg[white]">White block color</div>
<div data-fx="hover/T:block--right__bg[primary]">Primary block color</div>
<div data-fx="hover/T:block--right__bg[secondary]">Secondary block color</div>
<div data-fx="hover/T:block--right__bg[#5000a9]">Custom block color</div>
<div data-fx="hover/T:block--right__bg[--bs-red]">Custom block color using CSS variable</div>
</div>
Block size
Change the default block size of 10
to your own size by adding __size[{value}]
modification. This will affect the block size as well as the time that it will state in “intermediate” state.
<div data-fx-trigger="hover">
<div data-fx="hover/T:block--right__size[1.25]">Block size of 1.25</div>
<div data-fx="hover/T:block--right ">Default block size</div>
<div data-fx="hover/T:block--right__size[20]">Block size of 20</div>
</div>
Combining effects
Combine the several effects and modifiers to create new ones.