Author: | akhil0001 |
---|---|
Views Total: | 1,416 views |
Official Page: | Go to website |
Last Update: | May 3, 2019 |
License: | MIT |
Preview:

Description:
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/[email protected]/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; }, });