Transition.js

Why does this exist?

I like to animate changes in my web apps, but it's tedious to write out CSS transitions and animations for each interaction. Transition.js makes it easy to write out these animations as needed, and offers a unique Transition.from method that makes it extra easy to animate changes in the size and position of an element.

Easy Writing, Easy Reading

Transition.js makes the code for complex animations easy to write. Take a look at this snippet and guess what it does:


Transition.animate(elem, {
	'opacity': {
		'from': 0,
		'to': 1
	}
}, 500);

This code would animate the element "elem" from an opacity of 0 to 1, over the course of 500 milliseconds.

From Whence We Came

Transition.js has one especially powerful method that makes it stand out. Transition.from allows you to easily animate the change between two positions and sizes.

The simplest way to use this is to animate the change in an element when it moves. For instance, in Regretris, when the tetris pieces move, they use Transition.from.

This is incredibly easy to implement. The process is just three steps. First, you take a snapshot of the element in its current position.


var snapshot = Transition.snapshot(elem);

Next, you move the element to where you want it to end up. This can be anywhere. You can move it to a different parent element, change it's size, whatever you need to do.

Finally, you just need to transition from the original position to the new position:


Transition.from(elem, snapshot, duration);

You can use this same technique to transition one element from another, like in the demo on GitHub. (Try pressing the plus button.)