famo.us: how fade in a text box

Question

I want to have username/password/login_button surfaces that fade into view in a sequence. I think I know how to daisy chain the animations using the callback parameter of StateModifier.setTransform, but I can't figure out how to get something to fade into view. Here is my code just trying to get the login button to fade in:

/*globals define*/
define(function(require, exports, module) {
    // import dependencies

    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');
    var ModifierChain       = require("famous/modifiers/ModifierChain");
    var View = require('famous/core/View');
    var InputSurface      = require('famous/surfaces/InputSurface');

    // create the main context
    var mainContext = Engine.createContext();

    var Centered = function() {
        return new StateModifier({ origin: [0.5, 0.5] });
    };

    var Lefted = function() {
        return new StateModifier({ p: [0, 0.5] });
    };

    var Righted = function() {
        return new StateModifier({ origin: [1, 0.5] });
    };

    var Transparent = function () {
        var stateModifier = new StateModifier();
        stateModifier.setOpacity(0);
        return stateModifier;
    };

    var Scale = function (scale, transition, callback) {
        if (typeof transition == 'undefined') transition = immediately;

        var stateModifier = new StateModifier();
        stateModifier.setTransform(Transform.scale(scale, scale, 1), transition, callback);
        return stateModifier;
    };

    var FadeTo = function (opacity, transition, callback) {
        if (typeof transition == 'undefined') transition = immediately;

        var stateModifier = new StateModifier();
        stateModifier.setOpacity(opacity, transition, callback);
        return stateModifier;
    };

    var Translate = function(x, y, z, transition, callback) {
        if(typeof x == 'undefined') x = 0;
        if (typeof y == 'undefined') y = 0;
        if (typeof z == 'undefined') z = 0;
        if (typeof transition == 'undefined') transition = immediately;

        var stateModifier = new StateModifier();
        stateModifier.setTransform(Transform.translate(x, y, z), transition, callback);
        return stateModifier;
    };

    var Parallel = function (modifiers) {
        var result = new ModifierChain();

        for (var i = 0; i < modifiers.length; i++) {
            result.addModifier(modifiers[i]);
        }

        return result;
    };

    var famousOrange = '#FA5C4F';

    var oneSecondEaseInOut = { duration: 1000, curve: 'easeInOut' };
    var fastEaseInOut = { duration: 100, curve: 'easeInOut' };
    var immediately = { duration:0, curve: 'easeInOut' };

    mainContext.add(getLoginView());

    function getLoginView() {
        var loginView = new View();

        var usernameSurface = new InputSurface({
              size: [120, 20],
              properties: {
                color: famousOrange,
                textAlign: 'center',
                fontFamily: 'arial'
              }
            });

        var passwordSurface = new InputSurface({
              size: [120, 20],
              properties: {
                color: famousOrange,
                textAlign: 'center',
                fontFamily: 'arial'
              },
                type: 'password'
        });

        var loginButton = new Surface({
            size: [120, 30],
            content: 'Login',
            opacity: '50%',
            properties: {
                color: 'white',
                textAlign: 'center',
                lineHeight: '27px',
                borderColor: 'white',
                borderWidth: '1px',
                borderStyle: 'solid',
                backgroundColor: famousOrange,
                fontFamily: 'arial',
            }
        });

        loginView
            .add(Centered())
            .add(Translate(0, -15))
            .add(usernameSurface);

        loginView
            .add(Centered())
            .add(Translate(0, 15))
            .add(passwordSurface);

        loginView
            .add(Transparent()) // set the opacity to 0 at first
            .add(Centered())
            .add(Translate(0, 50, 0, oneSecondEaseInOut))
            .add(FadeTo(1, oneSecondEaseInOut)) // transition opacity to 1 over the next 1 second
            .add(loginButton);

        return loginView;
    }
});

Is the problem related to the fact that opacity is always multiplied by the parent node's opacity, and so since I set it to 0 up the hierarchy then it is not possible to multiply by anything else down below get it to be greater than zero?

Answer 1

I found the answer to my question. I simply added a new modifier function Fade that has a start and end opacity:

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

and then changed my code for displaying the login button to this:

loginView
    .add(Centered())
    .add(Translate(0, 50, 0, oneSecondEaseInOut))
    .add(Fade(0, 1, oneSecondEaseInOut)) // transition opacity from 0 to 1 over 1 second
    .add(loginButton);