Awesome Reveal Animation With jQuery And CSS3

File Size: 7.44 KB
Views Total: 2070
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Awesome Reveal Animation With jQuery And CSS3

This is a small jQuery script that makes use of CSS3 animations to apply an awesome reveal effect to any DOM element.

How to use it:

1. Include the core stylesheet reveal.css in the head of the document.

<link rel="stylesheet" href="css/reveal.css">

2. Add the main class 'animated' and an animation class of your choice to the target elements. You can also specify the animation delay in the data-delay attribute:

<div class="animated animation-LtoR" data-delay="10">
  Left To Right

<div class="animated animation-RtoL" data-delay="1500">
  Right To Left


3. Include the needed jQuery JavaScript library at the bottom of the page.

<script src="" 

4. Activate the reveal animation on the elments.

$(document).ready(function () {
  $('.animated').each(function (index) {
    $(this).delay($(this).data('delay')).queue(function () {

This awesome jQuery plugin is developed by Somsubhra1. For more Advanced Usages, please check the demo page or visit the official website.