Element Reveal Animations With JavaScript And CSS3 – Doorman

Doorman is a JavaScript library for apply subtle reveal animations to DOM objects using HTML5 data attributes and CSS3 transitions/transforms.

Installation:

# Yarn
yarn add doorman-effect
# NPM
$ npm install doorman-effect

Basic usage:

Include the main JavaScript on the webpage when needed.

<script src="doorman.min.js"></script>

Add the HTML5 attribute ‘data-doorman’ to the target element.

<span data-doorman>Element To Reveal</span>

Hide the element on load.

[data-doorman] {
  visibility: hidden;
}

Active the reveal animation on the element.

const elements = document.querySelectorAll('[data-doorman]');
const doorman = new Doorman(elements, { /* options here */ });
doorman.start();

Config the reveal animation in the JavaScript:

const doorman = new Doorman(elements, { 
      // lr (left to right) || rl (right to left) || tb (top to bottom) || bt (bottom to top).
      direction: "lr",
      // background color
      bgColor: "rgb(000, 000, 000)",
      // duration in milliseconds
      duration: "300",
      // delay time
      delay: "0",
      // easing effect
      easing: "cubic-bezier(0.860, 0.000, 0.070, 1.000)",
      // reverse animation
      reverse: false,
      // callbacks
      begin: function begin(element) {},
      complete: function complete(element) {}
      
});

Or via HTML5 data attributes:

<span data-doorman
      data-doorman-direction="lr"
      data-doorman-bgColor="rgb(000, 000, 000)"
      data-doorman-duration="300"
      data-doorman-delay="150"
      data-doorman-easing="cubic-bezier(0.860, 0.000, 0.070, 1.000)"
      data-doorman-reverse="flase">
</span>