Skip to content

A lightweight tweening micro-framewrok for your JavaScript projects. Only 2.8kb when minified.

License

Notifications You must be signed in to change notification settings

ashblue/simple-tween-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple Tween JS

Simple Tween JS is a tiny microframework for easily integrating Tweens by dropping in a file. The performance is uber optimized and has a minimal impact on your application. Its originally designed for HTML Canvas JavaScript applications, but you can use it for just about anything JavaScript related.

Live demo at http://ashblue.github.com/simple-tween-js/ (demo broken in IE9, but the library does work and has been tested in IE9)

##Setup

  1. Download the minified or regular tween.js file and place it in your project files

  2. Include the tween script at the bottom of your page, before your other JavaScript files

    <script type="text/javascript" src="tween.min.js"></script>
    
  3. You can now create new tweens with syntax similar to the following.

    var myTween = new Tween(startValue, distance, duration, animationType, loop);

##Browser Support Known to be stable in the following browsers. Could very well work in older versions such as IE8, haven't tested. Mainly because the demo is written in HTML5's Canvas.

  • Google Chrome - 22+
  • Safari - 6+
  • Firefox - 15+
  • Internet Exploror - 9+
  • Opera - 12+

##Usage Guide

  1. Create a new Tween object

    var myTween = new Tween(startValue, distance, duration, animationType, loop);
  2. You can then get the tween's current value by calling getValue

    myTween.getValue();
  3. For more information please see the documentation built into https://github.com/ashblue/simple-tween-js/blob/master/tween.js

###Available Methods

  • Tween.getValue();
  • Tween.expired();
  • Tween.reset();
  • Tween.set(startValue, distance, duration, animationType, loop);

###Easing Options You can choose from many different easing options for animationType: 'linear', 'quadIn', 'quadOut', 'quadInOut', 'cubeIn', 'cubeOut', 'cubeInOut', 'quartIn', 'quartOut', 'quartInOut', 'quintIn', 'quintOut', 'quintInOut', 'sineIn', 'sineOut', 'sineInOut', 'expoIn', 'expoOut', 'expoInOut', 'circIn', 'circOut', 'circInOut'

###How to make your tweens process faster The library here uses Date.now() to get the current time. If your JavaScript application already has a cached value of the current time, you can substitute all references to Date.now() with it.

About

A lightweight tweening micro-framewrok for your JavaScript projects. Only 2.8kb when minified.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published