jQuery Plugin To Create Simple CSS3 Animations - tween.js

tween.js is a jQuery based animation plugin which provides an easy way to create cross-browser CSS3 animations with support of easing effects.

Animations supported:

• Translate X / Y
• Rotate X / Y
• Scale X / Y
• Skew X / Y
• Opacity
• Border radius

How to use it:

1. Load the necessary jQuery library and the jQuery easing plugin on your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

2. Load the tween.js script after jQuery.

<script src="jquery.tween.js"></script>

3. Apply animations on a given element.

$('.box').tween({

  // Translate X / Y
  x: 30,
  y: 30

  // Rotate X / Y
  rotatex: 90,
  rotatey: 90

  // Scale X / Y
  scalex: 4,
  scaley: 4


  // Skew X / Y
  skewx: 45,
  skewy: 45

  // Opacity
  opacity: 0

  // border radious
  border-radius: 30

});

4. Advances usage.

var props = {
  // animations here
};

$('.box').tween(props,duration,easing,callback);

Change log:

v0.1.3 (2015-02-10)

• fixed bug. 0 value was accepted.

---

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