Direction-aware Content Reveal Effects – Direction Reveal

Direction Reveal is a JavaScript library written in ES 6 for direction-aware content reveal effects that animate in the content from the direction you are moving with the mouse and touch events.

Available effects:

• Swing
• Slide
• Rotate
• Flip
• roll-out

How to use it:

Install the Direction Reveal via NPM.

# NPM
$ npm install direction-reveal --save

Import the module.

import DirectionReveal from 'direction-reveal';

The html structure.

<div class="direction-reveal">
  <a href="#" class="direction-reveal__card">
    <img src="1.jpg" alt="Image" class="img-fluid">
    <div class="direction-reveal__overlay">
      <h3 class="direction-reveal__title">Title 1</h3>
      <p class="direction-reveal__text">Description 1</p>
    </div>
  </a>
  <a href="#" class="direction-reveal__card">
    <img src="2.jpg" alt="Image" class="img-fluid">
    <div class="direction-reveal__overlay">
      <h3 class="direction-reveal__title">Title 2</h3>
      <p class="direction-reveal__text">Description 2</p>
    </div>
  </a>
  <a href="#" class="direction-reveal__card">
    <img src="3.jpg" alt="Image" class="img-fluid">
    <div class="direction-reveal__overlay">
      <h3 class="direction-reveal__title">Title 3</h3>
      <p class="direction-reveal__text">Description 3</p>
    </div>
  </a>
  ...
</div>

Initialize the library and done.

const directionRevealDemo = DirectionReveal();

Possible options to customize the content reveal effects.

const directionRevealDemo = DirectionReveal({
      // container element
      selector: '.direction-reveal',
      // item element
      itemSelector: '.direction-reveal__card', 
      // 'swing', 'slide', 'flip', 'roll-out', or 'rotate'
      animationName: 'swing',
      // for enter event
      animationPostfixEnter: 'enter',
      // for leave event
      animationPostfixLeave: 'leave',
      // enable touch event
      enableTouch: true,
      // in milliseconds
      touchThreshold: 250 
      
});

Changelog:

v2.0.2 (11/07/2022)

• Update