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;
    var Surface = Famous.Core.Surface;
    var Modifier = Famous.Core.Modifier;
    var Transform = Famous.Core.Transform;
    var StateModifier = Famous.Modifiers.StateModifier;
    var ModifierChain = Famous.Modifiers.ModifierChain;
    var Timer = Famous.Utilities.Timer;
    var Easing = Famous.Transitions.Easing;

    var mainContext = Engine.createContext();
    
    var chainSurface = new Surface({
      size:[200,200],
      properties: { backgroundColor: 'green'}
    })
    
    chainSurface.chain = new ModifierChain();
    
    chainSurface.state = new StateModifier({ origin:[0.5,0.5] });
    chainSurface.sizeState = new StateModifier();
    chainSurface.fadeState = new StateModifier();
    
    chainSurface.chain.addModifier(chainSurface.fadeState);
    chainSurface.chain.addModifier(chainSurface.sizeState);
    chainSurface.chain.addModifier(chainSurface.state);
    
    mainContext.add(chainSurface.chain).add(chainSurface);
    
    chainSurface.on('click', function(){
      transition = {duration:3000,curve:Easing.inOutQuad};
    
      chainSurface.fadeState.setOpacity(0,transition);
      chainSurface.sizeState.setTransform(Transform.scale(0.5,0.5,1),transition);
      chainSurface.state.setOrigin([0.5,0],transition);
    });
});