Famo.us Fade in a Surface

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 StateModifier = Famous.Modifiers.StateModifier;
    var Timer = Famous.Utilities.Timer;
    var Easing = Famous.Transitions.Easing;

    var mainContext = Engine.createContext();
    
    var Fade = function (startOpacity, endOpacity, transition, callback) {
        var stateModifier = new StateModifier();
        stateModifier.setOpacity(startOpacity);
        stateModifier.setOpacity(endOpacity, transition, callback);
        return stateModifier;
    };

    var contentContainer = new Surface({
        size: [undefined, undefined],
        content: "Header",
        classes: ["red-bg"],
        properties: {
            lineHeight: "100px",
            textAlign: "center",
            backgroundColor: "red"
        }
    });
    
    var fiveSecondEaseInOut = { duration: 5000, curve: 'easeInOut' };

    mainContext.add(Fade(0, 1, fiveSecondEaseInOut)).add(contentContainer);
});