Famo.us

Pavel Kurnosov

60 FPS MATTER

How famo.us start:

http://periodic.famo.us/

What is Famo.us?

Famo.us is the only JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL.

What makes Famo.us different?

Famo.us uses matrix3d WebKit transforms on <div> elements with absolute positions rather than using a conventional nested DOM tree in which child elements are positioned relative to their parent elements. Famo.us gains performance by using the hardware-accelerated matrix3d WebKit transforms and avoiding the relatively slow layout flow calculations of a typical HTML5 page.

The Famo.us Render Tree

Famo.us abstracts away DOM management by maintaining a
representation of it in JavaScript called the Render Tree.

Render Tree has two types of nodes

Renderables

Modifiers

such as Surface

Renderables

Renderables are nodes that get drawn to the screen

Famo.us currently supports:

Surface Type	Associated Tag
Surface	`<div>`
ImageSurface	`<img>`
InputSurface	`<input>`
CanvasSurface	`<canvas>`
VideoSurface	`<video>`

Modifiers

Node that is capable of modifying the nodes below it in the Render Tree.

Modifiers are responsible for the layout and visibility
of the Render Tree below them

var modifier = new Modifier({
    transform : Transform.translate(100,200)
});

Views

In Famo.us, views are encapsulations of groups of renderables and modifiers that you wish to hide from the master Render Tree.

Deck

EdgeSwapper

GridLayout

HeaderFooterLayout

RenderController

Scrollview

SequentialLayout

And more.....

Physics transitions

Famo.us has a physics engine that can do a lot of game-like simulation, the least of which is to make animations bounce in a realistic-feeling way by using a spring model to guide the transitions.

Events

Famo.us has an EventHandler API that allows a user to broadcast, listen for, pipe to, and subscribe from events. Event handlers can broadcast with the emit or trigger method. Downstream handlers can listen for the event with the on method.

The event library comes with convenience modules for conditionally processing events, including event filtering, mapping, and arbitration.