Block Reveal Animation In JavaScript – RevealFx.js

RevealFx.js is a JavaScript library which makes use of anime.js to apply fancy reveal animations to block elements.

How to use it:

Install & download the package.

# NPM
$ npm install revealfx --save

Or directly load the RevealFx.js after anime.js.

<script src="https://unpkg.com/animejs"></script>
<script src="https://unpkg.com/revealfx@latest/src/revealFx.js"></script>

Initialize the RevealFx.js on the block element.

var myEl = document.querySelector('#el');
var myAnimation = new RevealFx(myEl,options);

Config the reveal animation using the following options.

var myAnimation = new RevealFx(myEl,{
    // If true, then the content will be hidden until it´s "revealed".
    isContentHidden: true,
    // number of layers to be displayed 
    layers:1,
    // The animation/reveal settings. This can be set initially or passed when calling the reveal method.
    revealSettings: {
      // Animation direction: left right (lr) || right left (rl) || top bottom (tb) || bottom top (bt).
      direction: 'lr',
      // Revealers´s background color Array.
      bgColors: ['#111'],
      // Animation speed. This is the speed to "cover" and also "uncover" the element (seperately, not the total time).
      duration: 500,
      // Animation easing. This is the easing to "cover" and also "uncover" the element.
      easing: 'easeInOutQuint',
      // percentage-based value representing how much of the area should be left covered.
      coverArea: 0,
      //milliseconds of delay between layers animation thatis used in stagger animation 
      delay:100,
    }
    
});

Event handlers.

var myAnimation = new RevealFx(myEl,{
    // when the revealer is covering the element (halfway through of the whole animation)
    onHalfway: function(contentEl, revealerEl) { return false; },
    // when the animation starts
    onStart: function(contentEl, revealerEl) { return false; },
      
    // when the revealer has completed uncovering
    onComplete: function(contentEl, revealerEl) { return false; },
});