jQuery Plugin To Handle CSS3 Animations On Any Elements - dreyanim

dreyanim is a lightweight jQuery plugin which makes it easy to apply awesome CSS3 animations on any elements, with configurable animation speed and delay.

Animation types included:

• ZoomIn
• ZoomOut
• FadeIn
• FadeOut
• SlideInFromUp
• SlideInFromDown
• SlideOutToLeft
• SlideInFromRight
• SlideOutToUp
• SlideOutToDown
• SlideOutToLeft
• SlideOutToRight
• FlipIn
• FlipOut
• FlipInAlternate
• FlipOutAlternate
• FallIn
• FallOut
• FallInAlternate
• FallOutAlternate
• RotateIn
• RotateOut
• wipeInHorizontal
• wipeOutHorizontal
• wipeInVertical
• wipeOutVertical

How to use it:

1. Load the core CSS library dreyanim.css in the header of the webpage that provides more than 22+ awesome CSS3 based animations just like the familiar Animate.css.

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

2. Load JQuery library and the JavaScript file dreyanim.js at the end of the document to improve the page load time.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js/dreyanim.js"></script>

3. Apply a CSS animation of your choice to desired element:

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

4. Set the animation speed & delay in milliseconds.

$('.element').dreyanim({
  animationType : "zoomIn",
  animationTime : 300,
  animationDelay : 0,
})

Change log:

2017-01-15

• Some more bug fixes

2017-01-15

• Fixed bug

2017-01-09

• Added the wipe animations

---

This awesome jQuery plugin is developed by christiandrey. For more Advanced Usages, please check the demo page or visit the official website.