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
$ 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.

Unmask();

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

Unmask({
  area: 'edge'
});

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

Unmask({
  size: 'half'
});

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

Unmask({
  origin: 'left'
});

Enable/disable the fadeIn transition. Default: true.

Unmask({
  fade: false
});

Set the animation speed & transition delay.

Unmask({
  speed: 1000,
  delay: 0
});