Famo.us Modifier Chain

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,
        Modifier = Famous.Core.Modifier,
        Surface = Famous.Core.Surface,
        Transitionable =Famous.Transitions.Transitionable,
        Transform = Famous.Core.Transform;
    

     var context, mod, surf, opacityTransform, rotateTransform;

    context = Engine.createContext();

    context.setPerspective(1000);

    //the opacities starting value is 1
    opacityTransform = new Transitionable(1);

    //the starting rotation is an angle of zero
    //you can console log Transform.identity to see the value but its basically an angle of 0
    rotateTransform = new Transitionable(Transform.identity);


    //very basic modifier here
    mod = new Modifier({
        size: [100, 100],
        origin: [0.5, 0.5],
        align: [0.5, 0.5]
    });

    //very simple surface
    surf = new Surface({
        content: "Hello World",
        properties: {
            border: "1px red solid",
            textAlign: "center",
            lineHeight: "100px"
        }
    });

    //gotta add everything to the context
    context.add(mod).add(surf);

    //here I tell the modifier to transform using my custom transitionables transforms
    mod.transformFrom(rotateTransform);
    mod.opacityFrom(opacityTransform);


    //for illustration purposes I used a click event but trigger it any way you like
    surf.on("click", function () {
        opacityTransform.set(0, {duration: 1000});
        rotateTransform.set(Transform.rotateX(4), {duration: 1000});
    });
    
    
});