Famo.us/Angular
Build highly interactive, data-driven, and modular web applications with the combined strengths of Famo.us and AngularJS.
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>
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>
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>
Allow users to easily dictate surface sizes and translation distances by leveraging Angular bindings.
1 <fa-surface>
2 <input type="range" ng-model="translateX">
3 </fa-surface>
4
5 <fa-modifier fa-translate="[translateX, 0]">
6 <fa-surface fa-size="[40, 40]" class="square">
7 </fa-surface>
8 </fa-modifier>
All the power of Angular's animation events without ngAnimate.
1 <fa-surface>
2 <input type="range" ng-model="$parent.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>