Built in Masking

Create a 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 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

CSS mask effect example
<div data-tor-fx-trigger="hover">
  <h2>
    <span class="d-block"><span data-tor-fx="hover-T:mask.right exponential">Masking effect</span></span>
    <span class="d-block"><span data-tor-fx="hover-T:mask.right exponential delay(100ms)">made super easy</span></span>
    <span class="d-block"><span data-tor-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-tor-fx="<trigger>:mask.(<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 mask reveals upwards from bottom to top
  • down mask reveals downwards from top to bottom
  • left mask reveals from the right to the left
  • right mask 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.

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

Parent trigger

To animate the mask 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>: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 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 mask reveals upwards from bottom to top
  • down mask reveals downwards from top to bottom
  • left mask reveals from the right to the left
  • right mask reveals from the left to the right
mask.up
mask.right
mask.down
mask.left
<div data-tor-fx="hover-T:mask.up">mask.up</div>
<div data-tor-fx="hover-T:mask.right">mask.right</div>
<div data-tor-fx="hover-T:mask.down">mask.down</div>
<div data-tor-fx="hover-T:mask.left">mask.left</div>
mask.up
mask.right
mask.down
mask.left
<div data-tor-fx="active-T:mask.up">mask.up</div>
<div data-tor-fx="active-T:mask.right">mask.right</div>
<div data-tor-fx="active-T:mask.down">mask.down</div>
<div data-tor-fx="active-T:mask.left">mask.left</div>
mask.up
mask.right
mask.down
mask.left
<div data-tor-fx="inview-T:mask.up">mask.up</div>
<div data-tor-fx="inview-T:mask.right">mask.right</div>
<div data-tor-fx="inview-T:mask.down">mask.down</div>
<div data-tor-fx="inview-T:mask.left">mask.left</div>

Modifications

Skew

Add __skew(<value>) option to mask.<direction> effect to create a skewed reveal.

Skew SM
Skew MD
Skew LG
<div data-tor-fx-trigger="hover">
  <div data-tor-fx="hover-T:mask.right__skew(sm) slowest">Skew SM</div>
  <div data-tor-fx="hover-T:mask.right__skew(md) slowest">Skew MD</div>
  <div data-tor-fx="hover-T:mask.right__skew(lg) slowest">Skew LG</div>
</div>