famous-101-positioning-4-simplified.js

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');

var mainContext = Engine.createContext();

function translateModifier(){
  return new StateModifier({
    transform: Transform.translate(200, 0, 0)
  });
}

function rotateModifier(){
  return new StateModifier({
    transform: Transform.rotateZ(Math.PI/4)
  });
}

function createSurface(className){
  return new Surface({
    size: [100, 100],
    classes: [className]
  });
}

mainContext
  .add(translateModifier())
  .add(rotateModifier())
  .add(createSurface('red-bg'));

mainContext
  .add(rotateModifier())
  .add(translateModifier())
  .add(createSurface('grey-bg'));