{"id":20681158,"url":"https://github.com/akhil0001/revealfx","last_synced_at":"2025-06-25T00:05:21.668Z","repository":{"id":34677175,"uuid":"180575088","full_name":"akhil0001/RevealFx","owner":"akhil0001","description":"A javascript library to achieve beautiful block reveal animations ","archived":false,"fork":false,"pushed_at":"2022-11-22T22:28:15.000Z","size":7484,"stargazers_count":59,"open_issues_count":9,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-23T17:18:42.381Z","etag":null,"topics":["animation","animation-library","animejs","block-reveal","css3","html5","javascript","javascript-library","page-reveal","revealer"],"latest_commit_sha":null,"homepage":"https://codepen.io/akhil_001/full/zXamxp","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akhil0001.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-10T12:17:51.000Z","updated_at":"2025-04-26T17:48:41.000Z","dependencies_parsed_at":"2022-08-20T11:50:16.155Z","dependency_job_id":null,"html_url":"https://github.com/akhil0001/RevealFx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/akhil0001/RevealFx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akhil0001%2FRevealFx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akhil0001%2FRevealFx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akhil0001%2FRevealFx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akhil0001%2FRevealFx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akhil0001","download_url":"https://codeload.github.com/akhil0001/RevealFx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akhil0001%2FRevealFx/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261777471,"owners_count":23208120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animation-library","animejs","block-reveal","css3","html5","javascript","javascript-library","page-reveal","revealer"],"created_at":"2024-11-16T22:09:50.445Z","updated_at":"2025-06-25T00:05:21.649Z","avatar_url":"https://github.com/akhil0001.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RevealFx \n\n[![HitCount](http://hits.dwyl.io/akhil0001/RevealFx.svg)](http://hits.dwyl.io/akhil0001/RevealFx)  \n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)  \n![Image of Spiderman reading book  from unsplash and a quote 'If you doubt your beliefs, you believe your doubts , If you fail to practice, you practice failure](/demo/img/spidey.gif)\n\n\nA javascript library to achieve beautiful block reveal animations\n\n\u003e If you find it useful, donot forget to :star:   star us -it does help!\n\n\n## Demo Links\nHere are the demo links to check out librarys and its uses\n - [RevealFx Demo](https://codepen.io/akhil_001/full/zXamxp)\n- [Image List  Display with Block Reveal Effect](https://codepen.io/akhil_001/full/ZZZdPY)\n- [Marvel Marathon (Carousel)](https://codepen.io/akhil_001/full/GLBoEB)\n## Installation \n- npm\n```npm\nnpm i revealfx\n```\n- CDN or unpkg [link](https://unpkg.com/revealfx@latest/src/revealFx.js)\n```\nhttps://unpkg.com/revealfx@latest/src/revealFx.js\n```\n\n\u003e Note: You need to have \u003e=3.0 version of anime.js \n```HTML\n\u003cscript src = \"anime.min.js\"\u003e\u003c/script\u003e\n\u003cscript src = \"revealFx.js\"\u003e\u003c/script\u003e\n```\n## Demo\n-  Clone this repo and run the following commands for the demo \n```node\nnpm install \nnpm start\n```\n\n## Syntax\n\n - Inorder to implement the animation to a certain element, first select the element . For example : \n ```js\n var element1 = document.querySelector('#id1');\n ```\n - Now it should be passed as the first argument to the constructor as follows\n```js\nvar rev1 = new RevealFx(element1,options);\n```\n- The above snippet initializes the element with the block reveal animation. The following method  invokes the animation\n```js\nrev1.reveal(revealSettings);\n```\n\n Refer API section for more details on customization\n\n## API\n\n |Name|Description |Default value |\n |----|------------|--------------|\n | `isContentHidden` | If true , the content of the element will be hidden until it is revealed | `true`|\n | `layers`| The number of layers to be shown during the animation | `1`|\n | `revealSettings`| JSON options for animations and callback functions. This can be set initially or be passed during reveal() method call  | `{}` |\n - The following are the options available inside the revealSettings JSON and can be set both at initialization or during the reveal() method call\n\n |Name|Description |Default value |\n |-----|------|-------|\n | `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'`|\n |`bgColors`| Array of colors that can be set as background for each layer respectively |`['#111']`|\n |`duration`| Total Time taken for animation to take place | `500`|\n |`easing`| Easing function for animation. Many more easing functions are available at anime.js| `easeInOutQuint`|\n |`coverArea`| percentage-based value representing how much of the area should be left covered | `0`|\n |`delay`| staggered delay in timing between the layer | `100`|\n |`onStart`| Callback, with the parameters of the element that is animated and layers that animate ,when the animation starts | `Method/Function`|\n |`onHalfway`| Callback, with the similar parameters as the above method , when the animation is halfway through of the animation | `Method/Function`|\n |`onComplete`| Callback,with the similar parameters as the above method , when the animation is completed | `Method/Function`|\n\n## Methods and Functions\n\n - `onStart`\n    - This is a callback method with the parameters of the element that is animated and layers that animate ,when the animation starts\n    - parameters: `contentEl`,`revealerEl`\n    ```js\n     onStart: function (contentEl, revealerEl) {\n           //contentEl is the element that is animated.\n            \n            //revealerEl is an array of the layers that animate the contentEl\n        }\n    ```\n- `onHalfway`\n    - 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\n    - parameters: `contentEl`,`revealerEl`\n    ```js\n     onHalfway: function (contentEl, revealerEl) {\n           //contentEl is the element that is animated.\n\n            //revealerEl is an array of the layers that animate the contentEl\n        }\n    ```\n- `onComplete`\n    - This is a callback method with the parameters of the element that is animated and layers that animate ,when the animation completes\n    - parameters: `contentEl`,`revealerEl`\n    ```js\n     onComplete: function (contentEl, revealerEl) {\n           //contentEl is the element that is animated.\n            \n            //revealerEl is an array of the layers that animate the contentEl\n        }\n    ```\n\n\n## Contribute\n- Fork it or clone it\n- git checkout -b NEW-FEATURE\n- git commit -am 'ADD SOME FEATURE'\n- git push origin NEW-FEATURE\n\n## ToDos\n\n- [x] Add Images to Readme\n\n- [x] links update in the documentation\n\n- [ ] demo snippets update\n\n- [ ] use template instead of create Element\n\n- [ ] create demo on the page transitions\n\n## Credits\n\nThis is inspired from [Mary Lou](https://tympanus.net/codrops/author/crnacura/)'s [Block Reveal Animation Tutorial](https://tympanus.net/codrops/2016/12/21/block-reveal-effects/). As part of a design for my portfolio website, I have used this effect for user's focus.\nThis 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 \n\n## License\nMIT ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakhil0001%2Frevealfx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakhil0001%2Frevealfx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakhil0001%2Frevealfx/lists"}