Reveal Element On Scroll With JavaScript And CSS – Unmask.js

Category: Animation , Javascript | August 17, 2019
Author: unionco
Views Total: 498 views
Official Page: Go to website
Last Update: August 17, 2019
License: MIT


Reveal Element On Scroll With JavaScript And CSS – Unmask.js


Unmask.js is a small scroll-triggered animation library which reveals/unmasks elements when they’re visible in the viewport.

The library uses CSS clip-path to mask/unmask elements when they’re scrolled into view.

Based on the Intersection Observer API which provides a simple and fast way to determine if an element is inside the viewport on scroll.

How to use it:

Install & download.

$ npm install @union/unmask --save

Import the Unmask.js module.

import Unmask from 'unmask';

Add the data-unmask attribute to the target element.

<img src="1.jpg" data-unmask />

Hide the element on page load.

[data-unmask] {
  opacity: 0;

Initialize the library and done.


Specify what area of the element the transition starts from.  ‘edge’ (default), or ‘center’.

  area: 'edge'

Decide whether to transition the entire unmask or start halfway. Default: ‘full’.

  size: 'half'

Specify from which the transition starts: ‘left’ (default), ‘right’, ‘top’, ‘bottom’, ‘horizontal’, ‘vertical’, ‘center’.

  origin: 'left'

Enable/disable the fadeIn transition. Default: true.

  fade: false

Set the animation speed & transition delay.

  speed: 1000,
  delay: 0

You Might Be Interested In:

Leave a Reply