Animate.css Helper

A compact helper plugin for jQuery that allows dynamic application of CSS animations to jQuery-selected DOM elements.

Project Description

Created explicitly to work with Daniel Eden's excellent CSS library "Animate.css", but it also supports custom animations, provided they were defined in the same way as "Animate.css" defines its own animations.

This plugin handles the correct application of an animation to a DOM element, including customizable settings for animation duration, delay and amount of loops. While doing so it takes care of inline-styles potentially being present on the element to be animated and restores those when the animation is completed. It also provides the option of define a callback function that will be executed when the animation has ended.

Used Technologies:

JavaScript, CSS3, jQuery, Animate.css

Requiremements:

  • Animate.css

    Even when one wants to use only their own custom animations: This plugin expects the basics laid out by "Animate.css" to be present to work, so any custom animations have to be built on top of it.

Inmplementation and Usage

Example Call

  $(window).load(function(){
    $('.zoom-in-on-page-load.initially-hidden').removeClass('initially-hidden').applyAnimation({ 
      type: 'zoomIn', 
      duration: 0.64, 
      delay: 0.2, 
      loops: 3, 
      callback: function(a, b){ console.log('Animation: "' + a + '" executed ' + b + ' times.'); }, 
      callback_params: ['zoomIn', 3] 
    });
  });
To use the plugin, simply chain the function call to a jQuery selection set.

Options:

  • Parameter: type
    Expects: String
    Default Value: "pulse"
    Description:
    Defines the type of animation to be played by providing the name of the animation's CSS class / keyframe animation name (which are synonymous in Animate.css).

  • Parameter: duration
    Expects: Number / String / Void
    Default Value: null
    Description:
    Determines how long it will take the animation to run. Not specifying anything will fall back to the default animation duration defined by Animate.css. Numeric values will always be interpreted as seconds, so it is strongly recommended to enter floating point numbers for precise control. Alternatively, it is also possible to provide a string like "240ms".

  • Parameter: delay
    Expects: Number / String / Void
    Default Value: null
    Description:
    Determines how long the browser will wait after the function has been called before it actally starts the animation. Not specifying anything will cause the animation to run immediately. Numeric values will always be interpreted as seconds, so it is strongly recommended to enter floating point numbers for precise control. Alternatively, it is also possible to provide a string like "240ms".

  • Parameter: loops
    Expects: Integer / Void
    Default Value: null
    Description:
    Defines how many times the animation will start again from the beginning after it finished. After the specified amout it will end for good. Not specifying anything here will cause the animation to run only once.

  • Parameter: callback
    Expects: Function / Void
    Default Value: null
    Description:
    A callback function can be passed to the plugin that will be called when the animation has finished.

  • Parameter: callback_params
    Expects: Array / Void
    Default Value: null
    Description:
    If the provided callback function requires certain parameters, they must be provided via this property. This parameter only accepts an array, you can not provide callback parameters in any other form.