Skip to content

jQuery plugin to dynamically apply animate.css animations

License

Notifications You must be signed in to change notification settings

martingg88/animateCSS

 
 

Repository files navigation

Animate CSS jQuery Plugin

A jQuery plugin to dynamically apply Dan Eden's animate.css animations with callbacks

Code Climate

Getting Started

Bower

Install with Bower bower install animateCSS

Download

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="dist/animatecss.min.js"></script>
<script>
$(document).ready( function(){
  $('#your-id').animateCSS("fadeIn");
});
</script>

Documentation

{
  infinite: false, // True or False
  animationClass: "animated", // Can be any class
  delay: 0 // Can be any value (in ms)
  duration: 1000 // Can be any value (in ms)
  callback: // Any function
}

When using infinite: true and a delay, the delay will only occur before the first loop, not on every loop.

Examples

Basic

$('#your-id').animateCSS('fadeIn');

With callback

$('#your-id').animateCSS('fadeIn', function(){
    console.log('Boom! Animation Complete');
});

With delay (in ms)

$('#your-id').animateCSS('fadeIn', {delay: 500});

With delay AND callback

$('#your-id').animateCSS('fadeIn', {
  delay: 1000,
  callback: function(){
    console.log('Boom! Animation Complete');
  }
});

With duration (in ms)

$('#your-id').animateCSS('fadeIn', {duration: 3000});

Chain multiple animations

If you use the standard jQuery chaining mechanism, each animation will fire at the same time so you have to include the next animation in the callback.

$('#your-id').animateCSS('fadeInUp', function() {
  console.log('Boom! First animation Complete');
  $(this).animateCSS("fadeOutUp", function(){
    console.log('Boom Boom! Second animation Complete');
  })
});

Offset animations

You can offset animations by using the delay mechanism

$('#your-id').animateCSS('fadeIn');
$('#another-id').animateCSS('fadeIn', {delay:100});

If you want to hide an element when the page loads and then apply an effect, it might look something like this:

.js #your-id {
  visibility:hidden;
}
$(window).load( function(){
  $('#your-id').animateCSS('fadeIn', function(){
    console.log('Boom! Animation Complete');
  });
});

Release History

Please consult the official changelog

About

jQuery plugin to dynamically apply animate.css animations

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 70.1%
  • CoffeeScript 29.9%