akhil0001 / revealfx

A javascript library to achieve beautiful block reveal animations

RevealFx

A javascript library to achieve beautiful block reveal animations

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

Demo Links

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

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

Installation

• 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>

Demo

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

npm install 
npm start

Syntax

• 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

API

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	{}

• The following are the options available inside the revealSettings JSON and can be set both at initialization or during the 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

Methods and Functions

• 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
      }

Contribute

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

ToDos

• Add Images to Readme

• links update in the documentation

• demo snippets update

• use template instead of create Element

• create demo on the page transitions

Credits

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

License

MIT

revealfx's Issues

TypeScript support

Currently there's no way to use this fantastic mini library in TypeScript project due to the reason that module import does not work with Typescript.

@akhil000 it would've been really appreciated!

"Reversing" a reveal animation

I can't seem to figure out how to "reverse" an animation.
Currently, I am trying to use this to open and close a full-screen menu. Opening it works perfectly fine, but creating a second RevealFx with reversed properties breaks the whole thing. (I don't get any errors, but the menu would not open anymore).

I was wondering if there was a way to do the same animation, but in reverse.

main.js:

var mainMenu = document.querySelector("#main-menu");

  var menuOpenReveal = new RevealFx(mainMenu, {
    layers: 1,
    isContentHidden: true,
    revealSettings: {
      bgColors: ["#1B1C21"],
      duration: 600,
      delay: 0,
      easing: "easeInOutExpo",
      direction: "bt",
      onStart: function(contentEl, revealerEl) {
        contentEl.style.opacity = 0;
      },
      onHalfway: function(contentEl, revealerEl) {
        contentEl.style.opacity = 1;
      }
    }
  });

I run the menuOpenReveal.reveal() on click of a button in my header.

Thanks for the library by the way, really love how good and smooth it is! ❤️