A javascript library to achieve beautiful block reveal animations
A javascript library to achieve beautiful block reveal animations
If you find it useful, donot forget to :star: star us -it does help!
Here are the demo links to check out librarys and its uses
npm i revealfx
https://unpkg.com/revealfx@latest/src/revealFx.js
Note: You need to have >=3.0 version of anime.js
<script src = "anime.min.js"></script>
<script src = "revealFx.js"></script>
npm install
npm start
var element1 = document.querySelector('#id1');
var rev1 = new RevealFx(element1,options);
rev1.reveal(revealSettings);
Refer API section for more details on customization
Name | Description | Default value |
---|---|---|
isContentHidden |
If true , the content of the element will be hidden until it is revealed | true |
layers |
The number of layers to be shown during the animation | 1 |
revealSettings |
JSON options for animations and callback functions. This can be set initially or be passed during reveal() method call | {} |
Name | Description | Default value |
---|---|---|
direction |
Animation direction: Block can be revealed from left to right (lr) or right to left (rl) or top to bottom (tb) or bottom to top (bt) | 'lr' |
bgColors |
Array of colors that can be set as background for each layer respectively | ['#111'] |
duration |
Total Time taken for animation to take place | 500 |
easing |
Easing function for animation. Many more easing functions are available at anime.js | easeInOutQuint |
coverArea |
percentage-based value representing how much of the area should be left covered | 0 |
delay |
staggered delay in timing between the layer | 100 |
onStart |
Callback, with the parameters of the element that is animated and layers that animate ,when the animation starts | Method/Function |
onHalfway |
Callback, with the similar parameters as the above method , when the animation is halfway through of the animation | Method/Function |
onComplete |
Callback,with the similar parameters as the above method , when the animation is completed | Method/Function |
onStart
contentEl
,revealerEl
onStart: function (contentEl, revealerEl) {
//contentEl is the element that is animated.
//revealerEl is an array of the layers that animate the contentEl
}
onHalfway
contentEl
,revealerEl
onHalfway: function (contentEl, revealerEl) {
//contentEl is the element that is animated.
//revealerEl is an array of the layers that animate the contentEl
}
onComplete
contentEl
,revealerEl
onComplete: function (contentEl, revealerEl) {
//contentEl is the element that is animated.
//revealerEl is an array of the layers that animate the contentEl
}
Add Images to Readme
links update in the documentation
demo snippets update
use template instead of create Element
create demo on the page transitions
This is inspired from Mary Lou's Block Reveal Animation Tutorial. As part of a design for my portfolio website, I have used this effect for user's focus. This plugin draws major logic from the article but provides a lean,more options and self descriptive API which can be used to create sleak and superb block animation. I hope you will find this library useful
MIT