animat.io

A Modern CSS Animations / Effects Library

Download Now

Getting Started

Animatio Query Language

If you've used jQuery then you already know how to use animatio. We originally designed animatio as plugin for jQuery, but decided to create a framework agnostic animation library that followed a common pattern that everyone is familiar with. With the rise of the SPA frameworks like Angular, React, Ember, etc... and isomorphic apps we wanted to appeal to a larger audience that could drop us in for animations/transitions without all the additional overhead.

If jQuery is NOT included on the page $ will reference animatio. $('#element') would be the same as animatio('#element')

Usage

You can apply any animation by just by calling .animate method and defining the animation type to any element.

 

  $(selector).animate('fadeIn');
Configure

Effects are completely customizable. Default configuration settings:

  • duration Default: '1s'
  • timing Default: 'ease'
  • iterationCount Default: 1
  • direction Default: 'normal'
  • delay Default: '0s'
  • fillMode Default: 'forwards'
You find a list of configurable properties here - Official W3C Document.
 

  $(selector).animate('pulse', {
    delay: '1s',
    duration: '2s',
    iterationCount: 'infinite'
  });
Callback

You can add an optional third parameter to define a callback function that will be executed when the animation ends.

 

  $(selector).animate('fadeIn', function(){
    $(this).animate('fadeOut');
  });
Customize

There are predefined animations that are ready to use. However, you can also create your own animation by setting it as a string in config.rule.

{browser} is a place-holder that we will be updated with the correct browser prefix once the rule has been appended to the document head.

 
  var rule = "0%   { {browser}transform: translateX(0);    }," +
             "100% { {browser}transform: translateX(100%); } ";

  $(selector).animate('moveLeft', {
    rule: rule
  });

Using Animations

Predefined Animations

Below you'll find animations that are provided out-of-the-box. This set of baked-in goodies is a combination off Dan Eden's Animate.css, Christian's (aka miniMac) Magic and our own set of effects.

Bomb
Bounce
Fade In
Fade Out
Magic
Math
Miscellaneous
Open
Perspective
Rotate
Slide
Space
Tin
Zoom

Using Transforms

Transforms provide you with the ability to control all aspects of the element, transitional and supported tranform properties. This can be powerful when used in combination with animations.

Usage

You can easily transform any element by simply defining the properties you would like to animate.
Unit properties can take relative values -= or +=.

 

  $(selector).transform({
    height: 200,
    left: '-=100',
    opacity: 1,
    top: '+=' + 60,
    width: '+=500',
  });
Callbacks

You can add an optional second parameter to define a callback function that will be executed when the transformation ends.

 

  $(selector).transform({
    left: '50%',
    top: '50%'
  }, '1s', function(){
    $(this).transform({ width: 500 }, '1s');
  });
You stay classy San Diego.
Transform + Animation - Live editor
Notification - Live editor