A javascript library to achieve beautiful block reveal animations

If you find it useful, donot forget to ⭐ star us -it does help!

Here are the demo links to check out librarys and its uses

• RevealFx Demo
• Image List Display with Block Reveal Effect
• Marvel Marathon (Carousel)

• npm

npm i revealfx

• CDN or unpkg link

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>

• Clone this repo and run the following commands for the demo

npm install 
npm start

• Inorder to implement the animation to a certain element, first select the element . For example :

var element1 = document.querySelector('#id1');

• Now it should be passed as the first argument to the constructor as follows

var rev1 = new RevealFx(element1,options);

• The above snippet initializes the element with the block reveal animation. The following method invokes the animation

rev1.reveal(revealSettings);

Refer API section for more details on customization

• The following are the options available inside the revealSettings JSON and can be set both at initialization or during the reveal() method call

• onStart
  • This is a callback method with the parameters of the element that is animated and layers that animate ,when the animation starts
  • parameters: 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
  • This is a callback method with the parameters of the element that is animated and layers that animate ,when the animation is halfway through the animation
  • parameters: 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
  • This is a callback method with the parameters of the element that is animated and layers that animate ,when the animation completes
  • parameters: contentEl,revealerEl

   onComplete: function (contentEl, revealerEl) {
         //contentEl is the element that is animated.
          
          //revealerEl is an array of the layers that animate the contentEl
      }

• Fork it or clone it
• git checkout -b NEW-FEATURE
• git commit -am 'ADD SOME FEATURE'
• git push origin NEW-FEATURE

• 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