Maquette demo

"Hero transitions"

The term 'hero-transition' was coined by the Polymer project. They describe it as: 'hero-transition' transforms two elements in different pages such that they appear to be shared across the pages (Source).

One of the important aspects of maquette is animations. So is maquette also able to perform hero-transitions? Maquette has support for both disappearing and appearing elements. But in order to perform a hero transition, we need to be able to match a 'hero' element in a disappearing element to a 'hero' element in an appearing element.

For this demonstration we created a hero-manager object that is able to do just that. The hero-manager is hooked up to the normal enter and exit animations and to the afterUpdate callback. In the afterUpdate callback the exiting heroes are matched with entering heroes and then hero-transition animations are started.

We hope this demo convinced you of the flexibility that maquette gives you with regard to animations. The sourcecode for this demo can be found here.

To the maquette homepage.