Famo.us/Angular

Build highly interactive, data-driven, and modular web applications with the combined strengths of Famo.us and AngularJS.

Create your Famo.us app visually, in HTML

Bring the benefits of declarative UI authoring to your Famo.us app

1 <fa-grid-layout fa-options="options.grid" >
2   <fa-surface fa-size="[40, 40]" class="square" ng-repeat="square in squares">
3   </fa-surface>
4 </fa-grid-layout>

Bring Angular apps to life with Famo.us animations

Easily add animations to Famo.us objects declaratively, imperatively, or both.

 1 <div ng-controller="homepageExamplesCtrl">
 2   <fa-modifier ng-repeat="square in squares" class="rotateMod" fa-translate="[square.x, 50, 2]" fa-origin="[.125, .125]">
 3     <fa-surface class="square"  fa-size="[40, 40]"></fa-surface>
 4   </fa-modifier>
 5   <fa-animation autoplay="true" duration="1200" loop="true">
 6     <animate  targetModSelector=".rotateMod"
 7               field="rotateZ"
 8               startValue="0"
 9               endValue="6.283"
10               curve="linear" ></animate>
11   </fa-animation>
12 </div>

Use familiar Angular concepts, like ng-repeat

Make use of Angular tools to keep MVC logic separated and clean.

1 <fa-modifier fa-translate="[square.x, 40]" ng-repeat='square in squares'>
2   <fa-surface fa-size="[40, 40]" class="square">
3   </fa-surface>
4 </fa-modifier>

Combine Angular bindings with Famo.us attributes

Allow users to easily dictate surface sizes and translation distances by leveraging Angular bindings.

1 <fa-surface>
2   <input type="range" ng-model="data.rangeValue">
3  </fa-surface>
4 
5 <fa-modifier fa-translate="[translateX(data.rangeValue), 40, 0]">
6   <fa-surface fa-size="[40, 40]" class="square">
7   </fa-surface>
8 </fa-modifier>

Animate data structure changes with Famo.us.

All the power of Angular's animation events without ngAnimate.

 1 <fa-surface>
 2   <input type="range" ng-model="data.repeatedItems" min="0" max="16" />
 3 </fa-surface>
 4 <fa-modifier
 5   square
 6   ng-repeat="modifier in modifiers"
 7   fa-animate-enter="enter()"
 8   fa-animate-leave="leave()"
 9   fa-animate-halt="halt()"
10   fa-transform="transform"
11   fa-opacity="opacity"
12 >
13   <fa-surface fa-size="[40, 40]" class="square"></fa-surface>
14 </fa-modifier>

Check out the docs to learn more.