Famo.us

HTML

<script src="http://famousco.de/fiddle/famousBox.js"></script>

JavaScript

define('main', function (require, exports, module) {
	var Engine          = require('famous/core/Engine');
	var Surface         = require('famous/core/Surface');
	var Transform       = require('famous/core/Transform');
	var Scrollview      = require('famous/views/Scrollview');
    var Modifier        = require("famous/core/Modifier");
    var Transitionable  = require("famous/transitions/Transitionable");
    
	var context = Engine.createContext();
    var sizeTrans = new Transitionable(0);
    var sizeModifier = new Modifier({
        transform : function(){
            var s = sizeTrans.get() + 1;

            return Transform.scale(s, s);
        }
    });

	var scrollview = new Scrollview();
	var surfaces = [];

	scrollview.sequenceFrom(surfaces);

	for (var i = 0; i < 40; i++) {
	    var surface = new Surface({
	         content: "Surface: " + (i + 1),
	         size: [undefined, 200],
	         properties: {
	             backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
	             lineHeight: "200px",
	             textAlign: "center"
	         }
	    });

	    surface.pipe(scrollview);
	    surfaces.push(surface);
	}

	context.add(sizeModifier).add(scrollview);
});