Scrollview w/ Sequential Layout

ScrollWithSequential

define(function(require, exports, module) {
    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var ScrollView = require('famous/views/ScrollView');
    var SequentialLayout = require('famous/views/SequentialLayout');

    var mainContext = Engine.createContext();
        mainContext.setPerspective(1000);

    // Create top surface
    var topSurface = new Surface({ size: [undefined, 100], properties: { backgroundColor: 'pink' } });

    // Create sequential layout and children
    var sequentialLayout = new SequentialLayout({ direction: 0 });
    var sequentialSurfaces = [];
    sequentialSurfaces.push(new Surface({ size: [100, 100], properties: { backgroundColor: 'rgb(250, 171, 219)' } }));
    sequentialSurfaces.push(new Surface({ size: [100, 100], properties: { backgroundColor: 'rgb(255, 100, 165)' } }));
    sequentialSurfaces.push(new Surface({ size: [100, 100], properties: { backgroundColor: 'rgb(250, 43, 123)' } }));
    sequentialLayout.sequenceFrom(sequentialSurfaces);

    // Create bottom Surface
    var bottomSurface = new Surface({ size: [undefined, 100], properties: { backgroundColor: 'pink' } });

    // Create ScrollView and sequence from children
    var scrollView = new ScrollView();
    var items = [];

    items.push(topSurface);
    items.push(sequentialLayout);
    items.push(bottomSurface);

    scrollView.sequenceFrom(items);

    // Add to main context
    mainContext.add(scrollView);
});