Example for in / out animation with Mithril modules

Using https://gist.github.com/barneycarroll/c69fbe0786e37c941baf#file-animatedmodule-js, in response to http://lhorie.github.io/mithril-blog/velocity-animations-in-mithril.html#comment-1733335109

by ramnathv

HTML

<script src="https://rawgit.com/lhorie/mithril.js/master/mithril.js"></script>
<script src="https://rawgit.com/barneycarroll/c69fbe0786e37c941baf/raw/6d9e8a872f0f00c45ed6b3c2e3c165a21f589c83/animator.js"></script>

CSS

body {
    margin: 0;
}

.page {
    box-sizing: border-box;
    overflow: hidden;
    padding : 1em;
    width   : 100%;
}

.page1 {
    background: #dff;
}

.page2 {
    background: #ffd;
}

.page3 {
    background: #fdf;
}

JavaScript

// Our modules, simple for the sake of example.
// The modules don't need any animator-specific code, nor are there any conditions that must be met.
var page1 = {
	controller : function(){},
	view       : function(){
		return m( '.page.page1', [
			m('h1', 'Page 1!' ),
			m( 'a', {
				config : m.route,
				href : '/route2'
			}, 'Go to page 2' ),
            ' ',
			m( 'a', {
				config : m.route,
				href : '/route3'
			}, 'Go to page 3' )
		] );
	}
};

var page2 = {
	controller : function(){},
	view       : function(){
		return m( '.page.page2', [
			m('h1', 'Page 2!' ),
			m( 'a', {
				config : m.route,
				href : '/route1'
			}, 'Go to page 1' ),
            ' ',
			m( 'a', {
				config : m.route,
				href : '/route3'
			}, 'Go to page 3' )
		] );
	}
};

var page3 = {
	controller : function(){},
	view       : function(){
		return m( '.page.page3', [
			m('h1', 'Page 3!' ),
			m( 'a', {
				config : m.route,
				href : '/route1'
			}, 'Go to page 1' ),
            ' ',
			m( 'a', {
				config : m.route,
				href : '/route2'
			}, 'Go to page 2' )
		] );
	}
};

// A convenience wrapper to bind slideIn and slideOut functions (below) to a module using the animator plugin:
// https://gist.github.com/barneycarroll/c69fbe0786e37c941baf
var slidingPage = animator( slideIn, slideOut );

// Pass slidingPage variations of each page into the route. 
m.route( document.body, '/route1', {
	'/route1' : slidingPage( page1 ),
	'/route2' : slidingPage( page2 ),
	'/route3' : slidingPage( page3 )
} );

// Animation for sliding in. This is a bit basic, but you could do anything.
function slideIn( el, callback ){
	el.style.left       = '-100%';
	el.style.top        = '0';
	el.style.position   = 'fixed';
	el.style.transition = 'left .6s ease-in-out';

	setTimeout( function transit(){
		el.style.left = '0%';
	} );
    
	el.addEventListener( 'transitionend', callback, false );
}

// Slide out.
function slideOut( el, callback ){
	el.style.left       = '0%';
	el.style.top        =...