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;
zoomInzoomOutfadeInfadeOutslideInFromUpslideInFromDownslideInFromLeftslideInFromRightslideOutToUpslideOutToDownslideOutToLeftslideOutToRightflipInflipOutflipInAlternateflipOutAlternatefallInfallOutfallInAlternatefallOutAlternaterotateInrotateOutwipeInVerticalwipeInHorizontalwipeOutVerticalwipeOutHorizontal
| 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
Copyright 2017 Christian Dréy.
Licensed under the MIT License
