This page is work-in-progress. You can reach me on twitter or mail to


Transition is the animation played when changing application state.

Changing current transition:

app.transition = "implode";
app.transitionDuration = 0.5;


Custom transition:

Let's write a fade transition.

First thing to know is that app.setState makes a screenshot from a layer when leaving current state.

Transition is being drawn in the end of rendering process hence overlaying current rendering.

PLAYGROUND.Transitions.fade = function(progress, layer, screenshot) {

  layer.a(1 - progress);

  layer.drawImage(screenshot, 0, 0);

  /* restore alpha to previous value */



app.transition = "fade";

Click to change the state.

Predefined transitions:

split, implode

Ask question:

Fork me on GitHub