Built in Block reveal

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

CSS block effect example
<div data-tor-fx-trigger="hover hover-fix">
  <h2>
    <span class="d-block" data-tor-fx="hover-T:block.right__block(white) exponential">Masking effect</span>
    <span class="d-block" data-tor-fx="hover-T:block.right__block(white) exponential delay(100ms)">made super easy</span>
    <span class="d-block" data-tor-fx="hover-T:block.right__block(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-tor-fx="<trigger>:block.<direction> where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class false

And the <direction> one of the:

  • up block reveals upwards from bottom to top
  • down block reveals downwards from top to bottom
  • left block reveals from the right to the left
  • right block reveals from the left to the right

Because the clip-path hides entire element, it doesn't respond to user hover interaction. This is why hover: (hover) trigger is not available.

block.up
block.right
block.down
block.left
<div data-tor-fx="active:block.up">block.up</div>
<div data-tor-fx="active:block.right">block.right</div>
<div data-tor-fx="active:block.down">block.down</div>
<div data-tor-fx="active:block.left">block.left</div>
block.up
block.right
block.down
block.left
<div data-tor-fx="inview:block.up">block.up</div>
<div data-tor-fx="inview:block.right">block.right</div>
<div data-tor-fx="inview:block.down">block.down</div>
<div data-tor-fx="inview:block.left">block.left</div>

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-tor-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 be affected (will change)

Than add data-tor-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 viewport
  • active-T: - when .active class is applied on parent Trigger element
  • show-T: - when .show class is applied on parent Trigger element
  • hover-T: - when hover state is applied on parent Trigger element

And the <direction> one of the:

  • up block reveals upwards from bottom to top
  • down block reveals downwards from top to bottom
  • left block reveals from the right to the left
  • right block reveals from the left to the right
block.up
block.right
block.down
block.left
<div data-tor-fx="hover-T:block.up">block.up</div>
<div data-tor-fx="hover-T:block.right">block.right</div>
<div data-tor-fx="hover-T:block.down">block.down</div>
<div data-tor-fx="hover-T:block.left">block.left</div>
block.up
block.right
block.down
block.left
<div data-tor-fx="active-T:block.up">block.up</div>
<div data-tor-fx="active-T:block.right">block.right</div>
<div data-tor-fx="active-T:block.down">block.down</div>
<div data-tor-fx="active-T:block.left">block.left</div>
block.up
block.right
block.down
block.left
<div data-tor-fx="inview-T:block.up">block.up</div>
<div data-tor-fx="inview-T:block.right">block.right</div>
<div data-tor-fx="inview-T:block.down">block.down</div>
<div data-tor-fx="inview-T:block.left">block.left</div>

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.

Default block color
White block color
Primary block color
Secondary block color
<div data-tor-fx-trigger="hover">
  <div data-tor-fx="hover-T:block.right">Default block color</div>
  <div data-tor-fx="hover-T:block.right__block(white)">White block color</div>
  <div data-tor-fx="hover-T:block.right__block(primary)">Primary block color</div>
  <div data-tor-fx="hover-T:block.right__block(secondary)">Secondary block color</div>
</div>

Combining effects

Combine the several effects and modifiers to create new ones.

Masking effect made super easy with Torus Kit

CSS mask effect example