dreyanim

dreyanim is an animation library that makes it super easy to add "in" and "out" CSS animations to elements.

Browser support

dreyanim works on all browsers that support CSS3.

Setup

Download the latest version here.

Include the core CSS library in your page header;

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

Include jQuery and the dreyanim plugin at the end of the document;

<script src="js/jquery-3.1.0.slim.min.js"></script>
<script src="js/dreyanim.js"></script>

...and you're good to go!

Usage

To use the plugin, choose from a list of 26+ animations to use and apply it to your desired element and provide any of the available options;

$('.element').dreyanim({
  animationType : "zoomIn",
  animationTime : 600
})

Available options

The following options are available to change in the dreyanim plugin;

animationType

This option defines the type of animation to be used. It should be provided as a string. You can choose from any of the following animations;

zoomIn

zoomOut

fadeIn

fadeOut

slideInFromUp

slideInFromDown

slideInFromLeft

slideInFromRight

slideOutToUp

slideOutToDown

slideOutToLeft

slideOutToRight

flipIn

flipOut

flipInAlternate

flipOutAlternate

fallIn

fallOut

fallInAlternate

fallOutAlternate

rotateIn

rotateOut

wipeInVertical

wipeInHorizontal

wipeOutVertical

wipeOutHorizontal

Attribute	Type	Default
animationType	string	`zoomIn`

animationTime

This option defines the duration of the animation. It has a unit of milliseconds.

Attribute	Type	Default
animationTime	float	`600`

animationDelay

Provide a value for this option if you want the animation to be delayed. It also has a unit of milliseconds.

Attribute	Type	Default
animationDelay	float	`0`

Dependencies

Depends on jQuery.

License

Licensed under the MIT License

christiandrey/dreyanim