Famo.us Animate the Header Size

Just click on the header.

by Mabuti

HTML

<link rel="stylesheet" href="https://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/lib/famous/core/famous.css">
<script src="http://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/src/4f231991.polyfills.js"></script>
<script src="https://rawgit.com/jperl/famous-compiled/97f85aaa64af255adfe0407c941e0e859b0759bc/dist/src/804b0adb.main.js"></script>

JavaScript

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Transitionable = Famous.Transitions.Transitionable;
    var HeaderFooterLayout = Famous.Views.HeaderFooterLayout;
    var StateModifier = Famous.Modifiers.StateModifier;
    var Timer = Famous.Utilities.Timer;
    var Easing = Famous.Transitions.Easing;

    var mainContext = Engine.createContext();

    var layout = new HeaderFooterLayout({
        headerSize: 100,
        footerSize: 50
    });

    var header = new Surface({
        size: [undefined, undefined],
        content: "Header",
        classes: ["red-bg"],
        properties: {
            lineHeight: "100px",
            textAlign: "center",
            backgroundColor: "red"
        }
    })

    var open = false;

    header.on("click", function () {

        var transition = {
            duration: 400,
            curve: Easing.inOutQuad
        };

        var start = open ? 200 : 100;
        var end = open ? 100 : 200;

        open = !open;

        var transitionable = new Transitionable(start);

        var prerender = function () {
            layout.setOptions({
                headerSize: transitionable.get()
            })
        };

        var complete = function () {
            Engine.removeListener('prerender', prerender)
        };

        Engine.on('prerender', prerender);

        transitionable.set(end, transition, complete);

    });

    layout.header.add(header);

    layout.content.add(new Surface({
        size: [undefined, undefined],
        content: "Content",
        classes: ["grey-bg"],
        properties: {
            lineHeight: window.innerHeight - 150 + 'px',
            textAlign: "center",
            backgroundColor: "blue"
        }
    }));

    layout.footer.add(new Surface({
        size: [undefined, 50],
        content: "Footer",
        classes: ["red-bg"],
        properties: {
            lineHeight: "50px",
            textAlign:...