Vanilla JavaScript Animation & Easing Library – Gruuvy.js

Preview:

Description:

Gruuvy.js is a lightweight (4kb minified) JavaScript library for creating fast animations and easing effects that allow to animate an element’s style from x to y.

Built-in animation/easing types:

1. linear
2. easeInQuad
3. easeOutQuad
4. easeInOutQuad
5. easeInCubic
6. easeOutCubic
7. easeInOutCubic
8. easeInQuart
9. easeOutQuart
10. easeInOutQuart
11. easeInQuint
12. easeOutQuint
13. easeInOutQuint
14. easeInSine
15. easeOutSine
16. easeInOutSine
17. easeInCirc
18. easeOutCirc
19. easeInOutCirc
20. easeInBack
21. easeOutBack
22. easeInOutBack
23. easeInElastic
24. easeOutElastic
25. easeInOutElastic
26. easeInBounce
27. easeOutBounce
28. easeInOutBounce

Basic usage:

Load the following JavaScript file into your html document and the Gruuvy.js is ready for use.

<script src='gruuvy.js'></script>

Animate a specified element using the animate method as shown below:

• elem: element to be animated
• style: CSS style to run the animation on
• options: possible options and callbacks

Gruuvy.animate(elem,styles,options);

All possible options and callback functions.

// time in ms how long the animation will take
duration: 450,
// aniamtion type
style: 'linear', 
// callback function for when animation is complete
callback: false