https://github.com/one20/tinytween.js

A simple, small, frame-based animation plugin written in JS.
https://github.com/one20/tinytween.js

Last synced: about 2 months ago
JSON representation

A simple, small, frame-based animation plugin written in JS.

• Host: GitHub
• URL: https://github.com/one20/tinytween.js
• Owner: one20
• Created: 2014-08-01T21:45:35.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-08-02T00:39:37.000Z (over 10 years ago)
• Last Synced: 2024-03-19T13:20:43.317Z (10 months ago)
• Language: JavaScript
• Size: 137 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#TinyTween.js

A simple, small, frame-based animation plugin written in JS.

##Why?

TinyTween was conceived as an animation tool for creating HTML5 banner ads, focusing on small filesize and uses the concept of frames instead of creating time-based delays and tweens. This is a natural transition for those that have more experience working with animation timelines (e.g. Flash) and also gives the user more control over the code compared to SWF converters or any type of code generating software.

##Usage

```

  	//Easing function

	function cubicInOut(t, b, c, d) {

		var ts=(t/=d)*t;

		var tc=ts*t;

		return b+c*(-2*tc + 3*ts);

	}

	

	//Set the animation 'frames per second', default is 24

	TT.fps = 40; 

	

	//Add the '#box1' element to the timeline, with a lifespan from frame 1 to 50

	var boxAnimation = TT.create('#box1', 1, 50);

	

	//Animate the 'left' css property of box from 0px to 200px between frames 1 to 50

	boxAnimation.tween(1,50,{left:0},{left:200},cubicInOut);

	

	//Animate the 'opacity' css property of box from 1 to 0 between frames 25 to 50

	boxAnimation.tween(25,50,{opacity:1},{opacity:0},cubicInOut);

	

	//Play the animation

	TT.play();

```

You could also chain the methods:

```

TT.create('#box1', 1, 200).tween(1,50,{left:0},{left:200},cubicInOut).tween(25,50,{opacity:1},{opacity:0},cubicInOut);

```

##Easing

All animations use a linear easing function by default. The ```tween()``` method accepts an optional fifth parameter where you can pass in an easing function of your choice.

Learn more about easing equations from Robert Penner: http://www.robertpenner.com/easing/

##Dependencies

TinyTween.js is written in raw javascript, which means that it's not dependent on any frameworks or libraries.