Positioning Elements

To position elements in Famo.us, we use two key properties: align and origin.

The align property sets the anchor point on the parent element, while the origin property sets the anchor point on the child element. Together, these allow the engine to determine where the elements should be placed when rendered.

Align

The align property is a reference point that the child uses when positioning itself within a parent context. The align reference point can be anywhere within the parent, but by default it is located at [0, 0], the top-left of the parent context.

Origin

The origin property is an element’s own origin point. That is, it’s the anchor point that an element uses when positioning itself. The origin reference point can be anywhere within the element, but by default it is located at [0, 0], the top-left corner of the element.

Putting align and origin together

Align and origin are not much of anything without one another. When we position an element in Famo.us, we are really saying, “Place this element on the screen such that its origin point is in the same place as the parent’s align point.” To better understand, take a look at this example:

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
// @famous-block-group ao
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var Modifier = famous.core.Modifier;

var mainContext = Engine.createContext();

var modifier = new Modifier({
  origin: [0.5, 0.5], // The center of the element
  align: [0.5, 0.5] // The center of the parent
});

var square = new Surface({
  size: [100, 100],
  properties: {
    backgroundColor: '#fa5c4f'
  }
});

mainContext.add(square);

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
// @famous-block-group ao
// @famous-block-option textPanelActive true
// @famous-block-option pictureInPicture true
// @famous-block-filename en.md
# Try It!

Try changing the values for `origin` and `align` in the main `modifier` in this code example.

What happens if you change the `align` value to `[0, 0]`?

What happens if you change both `align` and `origin` value to `[1, 1]`?

Align vs. Origin

Let’s add a crosshair to show where the center of the context is, so we can get an even clearer look at how align and origin interact. In this example, lightSquare has its align set to [0.5, 0.5]. darkSquare, on the other hand, has its default origin overridden. While its align is the same as lightSquare, setting the origin to [1, 1] positions its bottom right corner in the context center.

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var Transform = famous.core.Transform;
var StateModifier = famous.modifiers.StateModifier;

var mainContext = Engine.createContext();

var lightSquare = new Surface({
  size: [100, 100],
  properties: {
    color: '#000000',
    backgroundColor: '#aaaaaa'
  }
});

var darkSquare = new Surface({
  size: [100, 100],
  properties: {
    color: '#dddddd',
    backgroundColor: '#666666'
  }
});

var centerCircle = new Surface({
  size: [15, 15],
  properties: {
    border: '1px solid #dddddd',
    borderRadius: '7px'
  }
});

var horizontalRule = new Surface({
  size: [undefined, 1],
  properties: {
    backgroundColor: '#ffffff'
  }
});

var verticalRule = new Surface({
  size: [1, undefined],
  properties: {
    backgroundColor: '#ffffff'
  }
});

var originModifier = new StateModifier({
  origin: [0.5, 0.5],
  align: [0.5, 0.5]
});

var alignModifier = new StateModifier({
  align: [0.5, 0.5],
  origin: [0, 0]
});

var alignOriginModifier = new StateModifier({
  align: [0.5, 0.5],
  origin: [1, 1]
});

mainContext.add(alignModifier).add(lightSquare);
mainContext.add(alignOriginModifier).add(darkSquare);

/* Bonus section! */
// Constructing this crosshair involves
// adding multiple surfaces to originModifier.
// To do this correctly, declare the modifier's
// place in the scene graph as a variable.

var node = mainContext.add(originModifier);
node.add(verticalRule);
node.add(horizontalRule);
node.add(centerCircle);

Origin and Transforms

Changing the origin does more than just change the anchor point on the child element. Origin is also the point about which transforms get applied. Here, we set origin to [0.5, 0.5] so that its rotation transform rotates the element about its center. If you set the origin to [0, 0], what do you think will happen? Give it a try!

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var Transform = famous.core.Transform;
var Modifier = famous.core.Modifier;

var mainContext = Engine.createContext();

var surface = new Surface({
  size: [200, 200],
  properties: {
    color: 'white',
    backgroundColor: '#fa5c4f'
  }
});

var modifier = new Modifier({
  align: [0.5, 0.5],
  origin: [0.5, 0.5]
});

var z = 0.01;
modifier.transformFrom(function() {
  return Transform.rotateZ(z += 0.01);
});

mainContext.add(modifier).add(surface);

Next: Ready-made Layouts »