Pro

Mask

Reveal hidden content with masking effect in four directions

Overview

Use mask-{direction} value in data-fx data attribute to reveal the hidden elements that are wrapped in element with .wrap class with stylish mask effect. Elements are hidden at the beginning and visible during the mask revealing animation on {action}.

How to use

Use data-fx="{action}:mask-{direction}" data attribute to reveal a hidden element with mask effect. Wrap all content into .wrap element.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

… and {direction} is one of:

  • -up to reveal an element using mask animation from bottom up
  • -down to reveal an element using mask animation from top down
  • -left to reveal an element using mask animation from right to left
  • -right to reveal an element using mask animation from left to right

Structure of mask-{direction}:

<div data-fx="{action}:mask-{direction}">
  <div class="wrap">
    Content...
  </div>
</div>

Do not use any data-fx attribute on .wrap element! This will cause unpredicted behavior.

On hover

To reveal a hidden content with mask effect on its hover, add data-fx="h:mask-{direction}" data attribute.

h:mask-up
h:mask-down
h:mask-left
h:mask-right
<div data-fx="h:mask-up">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-up</div>
  </div>
</div>

<div data-fx="h:mask-down">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-down</div>
  </div>
</div>

<div data-fx="h:mask-left">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-left</div>
  </div>
</div>

<div data-fx="h:mask-right">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-right</div>
  </div>
</div>

On active

To reveal a single element with mask effect when it gets .active class, add data-fx="a:mask-{direction}" data attribute.

Click the elements to toggle its .active class
a:mask-up
a:mask-down
a:mask-left
a:mask-right
<div data-fx="a:mask-up">
  <div class="wrap">
    <div class="bg-grey text-white">a:mask-up</div>
  </div>
</div>

<div data-fx="a:mask-down">
  <div class="wrap">
    <div class="bg-grey text-white">a:mask-down</div>
  </div>
</div>

<div data-fx="a:mask-left">
  <div class="wrap">
    <div class="bg-grey text-white">a:mask-left</div>
  </div>
</div>

<div data-fx="a:mask-right">
  <div class="wrap">
    <div class="bg-grey text-white">a:mask-right</div>
  </div>
</div>

On trigger hover

Reveal a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:mask-{direction}" data attribute to the elements you want to reveal when trigger is hovered.

Hover this trigger
th:mask-up
th:mask-down
th:mask-left
th:mask-right
<div data-trigger="hover">

  <div data-fx="th:mask-up">
    <div class="wrap">
      <div class="bg-grey text-white">th:mask-up</div>
    </div>
  </div>

  <div data-fx="th:mask-down">
    <div class="wrap">
      <div class="bg-grey text-white">th:mask-down</div>
    </div>
  </div>

  <div data-fx="th:mask-left">
    <div class="wrap">
      <div class="bg-grey text-white">th:mask-left</div>
    </div>
  </div>

  <div data-fx="th:mask-right">
    <div class="wrap">
      <div class="bg-grey text-white">th:mask-right</div>
    </div>
  </div>

</div>

On trigger active

Reveal a single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:mask-{direction}" data attribute to the elements you want to reveal when trigger is activated.

Click this trigger to toggle its .active class
ta:mask-up
ta:mask-down
ta:mask-left
ta:mask-right
<div data-trigger="active">

  <div data-fx="ta:mask-up">
    <div class="wrap">
      <div class="bg-grey text-white">ta:mask-up</div>
    </div>
  </div>

  <div data-fx="ta:mask-down">
    <div class="wrap">
      <div class="bg-grey text-white">ta:mask-down</div>
    </div>
  </div>

  <div data-fx="ta:mask-left">
    <div class="wrap">
      <div class="bg-grey text-white">ta:mask-left</div>
    </div>
  </div>

  <div data-fx="ta:mask-right">
    <div class="wrap">
      <div class="bg-grey text-white">ta:mask-right</div>
    </div>
  </div>

</div>

Styling

data-fx="block-*" can be styled with a skew effect.

Skew

Add stylish skewed effect to mask element by adding skew into data-fx.

h:mask-up skew
h:mask-down skew
h:mask-left skew
h:mask-right skew
<div data-fx="h:mask-up skew">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-up skew</div>
  </div>
</div>

<div data-fx="h:mask-down skew">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-down skew</div>
  </div>
</div>

<div data-fx="h:mask-left skew">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-left skew</div>
  </div>
</div>

<div data-fx="h:mask-right skew">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-right skew</div>
  </div>
</div>

.wrap transitions

With {action}:mask-* animation effect, it’s possible to use simple transitions of .wrap element, that will smoothly translate the .wrap when {action} has been started.

h:mask-up
h:mask-down
h:mask-left
h:mask-right
h:mask-right
<div data-fx="h:mask-up slide-up">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-up</div>
  </div>
</div>

<div data-fx="h:mask-down slide-down">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-down</div>
  </div>
</div>

<div data-fx="h:mask-left slide-left">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-left</div>
  </div>
</div>

<div data-fx="h:mask-right slide-right">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-right</div>
  </div>
</div>

<div data-fx="h:mask-right shrink-in">
  <div class="wrap">
    <div class="bg-grey text-white">h:mask-right</div>
  </div>
</div>

Advanced mask animations

Combinations

You can create interesting effects by combining multiple nested animation styles. Put the data-trigger="{action}" into parent data-fx to indicate that this is a parent trigger and add .anim-child class into any nested data-fx that are dependent on a parent trigger. Note that you can include nested mask-* animation to create a new animation combinations.

Note that not every nested animation combination can bring the right aesthetic look. You need to find the right balance between them.

<div class="row">

  <div class="col-md-4">
    <div class="bg-light" data-fx="h:mask-right skew" data-trigger="hover">
      <div class="wrap">
        <div class="anim-child" data-fx="th:pull-right pull-half">
          <img class="full" src="/assets/img/img-card-01.jpg">
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="bg-light" data-fx="h:mask-right skew" data-trigger="hover">
      <div class="wrap">
        <div class="anim-child" data-fx="th:shrink-in shrink-short">
          <img class="full" src="/assets/img/img-card-01.jpg">
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="bg-light" data-fx="h:mask-right skew" data-trigger="hover">
      <div class="wrap">
        <div class="anim-child" data-fx="th:mask-left th:shrink-in shrink-short skew">
          <div class="wrap">
            <img class="full" src="/assets/img/img-card-01.jpg">
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Delay

It is possible to use Delay by adding delay[{milliseconds}] to data-fx. But if you have nested animations that are dependent on parent data-trigger, add .anim-child class to nested data-fx element.

Click this trigger to toggle its .active class
<div data-trigger="active">

  <div data-fx="ta:mask-right skew">
    <div class="wrap">
      <div class="anim-child" data-fx="ta:pull-right pull-half">
        <img class="full" src="/assets/img/img-card-01.jpg">
      </div>
    </div>
  </div>

  <div data-fx="ta:mask-right skew delay[100ms]">
    <div class="wrap">
      <div class="anim-child" data-fx="ta:pull-right pull-half">
        <img class="full" src="/assets/img/img-card-01.jpg">
      </div>
    </div>
  </div>

  <div data-fx="ta:mask-right skew delay[200ms]">
    <div class="wrap">
      <div class="anim-child" data-fx="ta:pull-right pull-half">
        <img class="full" src="/assets/img/img-card-01.jpg">
      </div>
    </div>
  </div>

</div>