Vanilla JavaScript Animation & Easing Library – Gruuvy.js

Category: Animation , Javascript | January 27, 2017
Author:dusthazard
Views Total:692 views
Official Page:Go to website
Last Update:January 27, 2017
License:MIT

Preview:

Vanilla JavaScript Animation & Easing Library – Gruuvy.js

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

You Might Be Interested In:


Leave a Reply