Famo.us Base Fiddle

Using the compiled library from https://github.com/jperl/famous-compiled

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 Modifier = Famous.Core.Modifier;
    var RenderNode = Famous.Core.RenderNode;
    var Surface = Famous.Core.Surface;
    var Transform = Famous.Core.Transform;
    var Matrix = Famous.Core.Matrix;

    var GenericSync = Famous.Inputs.GenericSync;
    var MouseSync = Famous.Inputs.MouseSync;
    var TouchSync = Famous.Inputs.TouchSync;
    var Transitionable = Famous.Transitions.Transitionable;
    
    var appContext = Engine.createContext();
    
    var sync = new GenericSync(['mouse', 'touch']);
    
    var mainAngle = new Transitionable();
    
    mainAngle.set(0);
    
    var distance = 100;
    
    sync.on('update', function(data){
        var angle = mainAngle.get(0);
        mainAngle.set(angle + data.delta[0]*0.01+data.delta[1]*0.01);
    });
    
    for (var i = 0; i<8; i++) {
        var surface = new Surface({
          size: [true, true],
          content: 'welcome to famo.us '+i,
          properties: {
            color: 'white',
            backgroundColor: '#FA5C4F',
            padding: '10px',
          }
        });
        surface.angle = i*Math.PI/4;
        surface.modifier = new Modifier({
            origin: [0.5, 0.5],
            align: [0.5, 0.5]
        });
        surface.modifier.transformFrom(function(){
            
            var x = 200*Math.cos(this.angle+mainAngle.get());
            var y = 200*Math.sin(this.angle+mainAngle.get());
            
            return Transform.multiply(Transform.rotateZ(this.angle+mainAngle.get()), Transform.translate(distance,0,0));
            
        }.bind(surface));
        var node = new RenderNode(surface.modifier);
        node.add(surface);
        appContext.add(node);
        
        surface.on('click', function() {
            distance = 150;
        });
    }

    Engine.pipe(sync);
});