famous / famous-angular Goto Github PK

Bring structure to your Famo.us apps with the power of AngularJS. Famo.us/Angular integrates seamlessly with existing Angular and Famo.us apps.

Home Page: https://famo.us/angular

License: Mozilla Public License 2.0

JavaScript 97.27% CSS 0.55% HTML 2.13% Shell 0.06%

famous-angular's Introduction

Famo.us/Angular

This integration library is no longer supported by Famo.us

Add Famo.us interactions and animations to any AngularJS application and build Famo.us applications with AngularJS.

Using F/A, you can:

Create Famo.us apps using familiar AngularJS tools like controllers, directives, and services.
Bring rich Famo.us animations to new or existing AngularJS apps.
Use HTML to declare Famo.us UIs, complete with Angular's two-way databinding.
Easily integrate Famo.us and AngularJS apps.

###Read More Project Site

###Download Famo.us/Angular Starter Kit or bower install famous-angular

###Sample projects and generators

Famo.us/Angular Starter Project
fa-boilerplate starter repo *(community maintained)
Famo.us/Angular CodePen template
Famo.us/Angular Yeoman Generator *(community-maintained)
Flickrous — a simple Flickr example app
Famo.us/Angular Homepage Source Code

##Installation

####Before you start, tools you will need:

Download and install git
Download and install nodeJS
Install bower npm install -g bower

####Inside of your app:

Run bower install famous-angular
Add the following to your index.html

  <script src="bower_components/famous/dist/famous-global.js"></script>
  <script src="bower_components/famous-angular/dist/famous-angular.js"></script>

Add<link rel="stylesheet" href="bower_components/famous-angular/dist/famous-angular.css"> to the <head> of your index.html
Add the famous.angular module to your Angular module list (e.g. in a main app.js file: angular.module('yourMainModule', ['famous.angular']))
And add an <fa-app style="height: 200px"><fa-surface fa-background-color="'red'">Hello world</fa-surface></fa-app> in one of your templates. If you see 'Hello world' on a red background, you should be good to go. Note: currently, the element that the <fa-app> is on must be display: block (like a <div fa-app> or a <p fa-app>, or just <fa-app>) and must have a defined height (like style="height: 200px" in this example.)

CDN Dependencies

Here are a few CDN URLs for Famo.us and Famous-angular specific dependencies just in case you are not able to use bower or node for tooling in the app. You will still need to ensure that you have Angular 1.2.26 in your project as it is a dependency for Famous-Angular.

Famo.us:

Famous-Angular:

##Support

Feel free reach out for support on the Famous IRC channel on Freenode.
Please submit issues as Github issues.
Please create a CodePen forked from this pen for all of you code issues.

##Contributing

See CONTRIBUTING.md for dev environment instructions and contribution guidelines.

##Get in touch

As mentioned above, please direct support questions to GitHub Issues so that community members can help answer questions as well as benefit from answers.

For anything else, tweet at @befamous.

famous-angular's People

Contributors

Stargazers

Watchers

Forkers

arcdev1 meanjs sejas juniperchicago ngedmundas patrickjs mehulatl rahim aitoroses peterboda ogaoga philbot5000 robinboehm dmackerman augus csrampey alexiswtd fouad sethkontny timdegraw sschepis imcom stristr sheltowt j0n meezyart barameteus pratibha05 ghaiat zanthrash panos-matzavinos steerapi adrice727 kievechua kanasite saggann ptcc baconstarvation brtonnies fromop anujkumartech dai-shi xiaolinlu aalishanmatrix jonascript gbelmm marczhermo darylsew joseph-ortiz vikas23 nvdnkpr tjma2001 robinbressan halcyonandon davis rajatkhanna82 graunked mozinator cadz7 steveblue drclick ui-mknayab ocombe nullnotfound zackbrown rphansen91 bguiz dhsi vfone sebringj olendavis agileurbanite jimmykobe1171 abner dvsgnr hannahhoward panchalkalpesh thuongvu cognitronic srikant pfrend murindwaz chitimalli alansouzati marlonpp shroffshyam shipci troyscott mattwolfe khalihan kublaj jmeiss larrychen1990 jaggedsoft irkanu maswewe htmlstrap r4mazan jonnybgod jamwise

famous-angular's Issues

Support for famo.us physics

Would be so nice. Any plan?

Transitionable with fa-translate problem

I'm trying to slide some content up from the bottom of the app with fa-translate. The problem is that whenever I insert a transitionable into the directive, it breaks the surface and renders it in the top left corner.

I've got the following Transitionable declared in my controller:

var _height = 568;
$scope.detailsGridTranslationY = new Transitionable(_height);

and the following is my html

<fa-modifier 
        id="start-airport-details-modifier" 
        fa-origin="origins.startAirportDetails" 
        fa-translate="[0, detailsGridTranslationY,0]">
       <fa-surface id="start-airport-details" class="details-style" fa-size="sizes.detailsGrid" >
             SOME TEXT
      </fa-surface>
</fa-modifier>

I should note that the fa-translate directive works when I put in all integers ([0,0,0]) or when I put in normal scope variables (non Transitionable integers).

I've been banging my head on this for 3 days now and I haven't had any progress. Any insight would be helpful

can't get multiple animations to work

I don't seem to be able to declare 2 animations next to each other on the same view and trigger them independently.

Below is what I'm trying to do ... sometimes I want to trigger the first and sometimes the second animation. I only seem to be able to trigger the last declared animation. (i.e. 'in-animation-'+$index)
If I swap them around the out-animation is the only one that will trigger.

What am I doing wrong?

main.html

<fa-app>
    <fa-view
             ng-repeat="box in boxes"
             fa-size="[250, 50]">
        <fa-modifier fa-translate="[offset, 50*$index, 0]">
            <fa-modifier id="{{'box-' + $index}}" origin="[-100,0,0]">
                <fa-surface
                            fa-background-color="box.bg_color"
                            fa-color="box.color"
                            fa-size="[250, 50]">
                    <table>
                        <tr>
                            <td>
                                <input style="width: 50px" ng-model="box.bg_color"/><br>
                                <input style="width: 50px" ng-model="box.color"/>
                            </td>
                            <td align="center" fa-click="click($index)">
                                {{text}} {{$index + 1}}
                            </td>
                        </tr>
                    </table>
                </fa-surface>
            </fa-modifier>
        </fa-modifier>

        <fa-animation id="{{'out-animation-' + $index}}" duration="2000">
            <animate  targetModSelector="{{'#box-' + $index}}"
                     field="translate"
                     startValue="[0,0,0]"
                     endValue="[-100,0,0]"
                     curve="outElastic"/>
        </fa-animation>
        <fa-animation id="{{'in-animation-' + $index}}" duration="2000">
            <animate  targetModSelector="{{'#box-' + $index}}"
                     field="translate"
                     startValue="[-100,0,0]"
                     endValue="[0,0,0]"
                     curve="outElastic"/>
        </fa-animation>

    </fa-view>
</fa-app>

for the Controller I'm using is this

angular.module('integrationApp')
.controller('MainCtrl',function ($scope, $famous) {
    $scope.number = 6;
    $scope.offset = 200;
    $scope.text = "TEXT";
    $scope.boxes = [];
    $scope.selected = 0;

    $scope.$watch('number', function (num) {
        var arr = [];
        for (var i = 0; i < $scope.number; i++) {
            arr.push({bg_color: '#333', color: '#ccc'});
        }
        $scope.boxes = arr;
    });

    $scope.click = function (index) {
        console.log('clicked', index);
        $famous.find('#out-animation-' + $scope.selected)[0].replay();
        $famous.find('#in-animation-' + index)[0].replay();
        $scope.selected = index;
    };
});

[ng:btstrpd] App Already Bootstrapped

I'm getting the following error when running my F/A app

Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element '<html ng-app="integrationApp" data-ember-extension="1" class="ng-scope">'

The issue doesn't stop the app from working, it's just concerning ... it seems to think I've assigned ng-app twice.
I've only added it in the index.html

<html ng-app="integrationApp">

add fa-image-surface directive

Update gulpfile so that it doesn't build user-created custom directives

Currently, if you have a custom directive in the directives folder, like 'task.js' for example in MVCAngular, it's concatenated into famous.angular.js, resulting in angular throwing an error that it doesn't recognize the module, because the module is used before it's defined.

My current fix is using a 'custom-directives' folder.

tests

are there any?

The app/scripts/famous.angular.js symlink doesn't work on Windows

The symlink doesn't work on windows, and you can't use the app without it.
I have updated the gulp script to replace the symlink file with the completed concatenated file (instead of outputting it in the dist folder).
Do you see any reason why I shouldn't do that ?
Should i PR this change ?

Is there any reason why the concatenated file should stay in the dist folder ?

Weird behaviour of ngShow

If i am using ng-show="false" somewhere within fa-surface, then nothing will be displayed, even sibling divs that should not be affected by ngShow:

<fa-app class="full-screen">
  <fa-modifier fa-origin="[.5, .5]">
    <fa-surface class="center-box" fa-size="[500, 100]" >
      <div ng-show="false"> I am not shown</div>
      <div> I am not shown either, even though i should be </div>
    </fa-surface>
  </fa-modifier>
</fa-app>

ng-repeat order is misbehaving

after add/delete, order is changing; there's been a regression in the add/delete logic

ng.us website & documentation

I've been working on the script to generate the documentation. I've made a lot of progress and been able to make it work.
Since I didn't know how we wanted to show the documentation, I've decided to generate markdown files that can be served by a jekyll server (such as the ones from github.io).

Here is a quick demo I've made:

For the moment it's all in local. I'm not sure how you want me to push my updates.

Do I push only the scripts / templates and people will generate the doc on their own ?
Do I generate the files and commit them too ? In what folder ?
We can generate the docs in markdown and host them in the repository (no style other than markdown).
We can make a branch, generate the docs in html/markdown and serve it via github.io using jekyll (we can use our own custom domain too: https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages)
Do I generate a very basic documentation that will be included in a bigger website ?
Or do I generate an independant complete website ?
Where do we stand on ng.us ? Will there be anything ready for the release date ? If you have an idea of the design it would help me for the templates. Otherwise I will keep everything very light so that we can decorate it later. For the moment I've been using the styles from ionic: http://ionicframework.com/docs/api/

If we don't want to use github.io, we should probably switch from jekyll to a node based static generator, such as wintersmith so that we can include the static generation into the gulp tasks (if we use github.io we won't need to generate the static files as it will be automatic)

Edit: metalsmith seems even better than wintersmith since it can emulate the static site generation from jekyll: https://github.com/segmentio/metalsmith/tree/master/examples/jekyll

fa-modifier doesn't catch unregisterChild events

<fa-modifier> catches and stops registerChild events, but it doesn't catch and stop unregisterChild events. This means that the unregisterChild continues on to the parent. In one case, a <fa-scrollview> was catching its grandchildren's unregisterChild, and removing its children from its _children array.

surface multiple classes

When creating a surface with class="class1 class2" it seems to fails to add class2 and gives an error.

Adding class="' class1 class2 '" it does work but it adds 2x ' as class aswell, also ng-class is not working correctly.

Famous cdn

@zackbrown do you know if we could get access to the famous.js file from a CDN that will be release on May 19th ? Or maybe a repository with the concatenated file ? Will it be on bower ?
It would probably simplify the distribution of famous-angular a lot.

I'm refering to the latest newsletter with:

Additionally, we will provide famous.js from the Famo.us CDN so you can just point to famous.js in the head section of your index.html, just like jQuery.

generator-famous-angular

Would be nice to see a Yeoman Generator for Famous-Angular like there is for vanilla Famous: https://github.com/Famous/generator-famous

Update famous core. New version fixes ViewSequence error

If you'd prefer not to update the entire famous core that ang.us is using, the following section in ViewSequence must be deleted:

if(start === this.firstIndex) {
for (var i = 0; i < removeCount; i++) {
this.firstNode = this.firstNode.getNext();
}
this.firstNode.index = this.firstIndex;
}

Is there a "Best practices" way of making sizes respond to window changes?

Given the amount of layers here how would you recommend sizing elements as fractions of overall dimensions? (ye olde percent?)

Add header-footer layout

Incorrectly ordered ng-repeat elements when directive uses templateUrl. (Chrome only)

When an fa-scroll-view contains a ng-repeat with a directive that uses templateUrl for a template with fa-surface, the order messes up if the array length is greater than 10. Arrays with 9 elements or less work fine.

Controller code:
$scope.array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

Main view html:

<fa-scroll-view>
  <directive ng-repeat="num in array" test-index="$index"></directive>
</fa-scroll-view>

Directive code:

  .directive('directive', function () {
    return {
      templateUrl: '/template/directive.html',
      restrict: 'E',
      scope: {
        'testIndex': '='
      }
  })

Fetched template:

<fa-surface fa-size="[undefined, 20]">
 <div>{{testIndex}}<div>
</fa-surface>

If I remove the fa-surface in the fetched template, the order is fine.
If I inline the html from the fetched template, the order is fine.

Here it is in Chrome: http://cl.ly/image/0V0i2V0f1C2Q.
Here it is in Safari/Firefox: http://cl.ly/image/3T253L2u0U03.

The left column is when the directive uses templateUrl with the fa-surface. The right column is when the fa-surface is inlined in the view.

Async load, requirejs and bootstrap

I've been trying to understand the way that famous-angular is built and included into a new project.
I found the 2 stubs that are wrapped around the directives.
These 2 stubs are just 2 parts of a requirejs wrapper + a provider that will load the AMD famous modules, push them into an array that will be synchronously available for the directives via a service.
It will then call a global function that will bootstrap the app and launch it (you need to define that global function in your own app).

This all seems really "counter-angular" to me. Angular has been built upon the principle of dependency injection and you should not have to worry if your lib has been loaded.

Correct me if I'm wrong but you probably did this because the whole famous library is based on AMD and it will load asynchronously no matter what, so you prefer delaying the bootstrap and make sure that you have loaded everything before you launch the app.

I've made some modifications to the way the app is loaded that will remove the need to bootstrap.
You will be able to load the app like a regular angular app (with the directive ng-app, or with bootstrap if you really like it).
I also removed the need to use the stubs, famous will be a simple service that will load all the requirejs stuff before the app starts, just like it is right know but without all the directives in the middle.

We should be able to decouple this service from the directives and the users will be able to load only the directives that they need.
For the moment I built everything into one file, because it's easier that way and I don't know if you want to make multiple files or only one.

I will make a PR with all this once you have accepted the PR #7, because my update is based on the new gulp build task.

Task 'default' was not defined in your gulpfile but you tried to run it.

When i make 'npm start'

fa-scroll-view doesn't render all of the surfaces on each digest cycle

I believe that's what's happening. You can see in MVCAngular , commit 3701d542a5f73887eb6bc561f80c3bc3dcd21c2d,

that if you drag some of the tasks down past the edge of the screen, when you drag the tasks back up, some will be blank.

how to render with perspective

I'm translating a surface along the Z-axis but it seems that perspective rendering is not on by default, so the size of the surface doesn't change.

I noticed that there's an fa-perspective attribute on ```... I tried setting this to a value and to an array, but it didn't affect the rendering. Is this feature not working yet? Or am I doing something wrong?

Is there a way to show/hide nodes like ng-show?

http://famo.us/docs/views/RenderController
looks something but I'm not sure. I'd like to confirm if there's already a way.

Ng-repeat not rendering correctly

Hi All,

Not sure where to put stuff like this but thought Id create a github issue :) Let me know if there's a better place to put this stuff.

I have an existing angular app which I have integrated the famous libs correctly (tested by adding a "hello world" surface in one of my partials)

I'm having problems with ng-repeat and am not sure if I was doing this correctly.

The following is in one of my partials where all I am trying to do is repeat an image

<fa-app style="height: 568px; width: 320px; margin: 0;" fa-background-color="blue" >
    <fa-surface ng-repeat="tile in user.tiles" >
        <fa-image-surface fa-image-url="{{tile.image}}" fa-size="[320, 120]" ></fa-image-surface>
    </fa-surface>
</fa-app>

However, the following HTML gets generated which doesn't seem right. I'm not sure if its a bug with the framework or I am setting it up wrong? The highlighted fa-app elements in the attached screen seem to be repeated whereas I was expecting only the image surface to be repeated? Is there something I have missed?

Initial Bootstrapping of Require + Famous not performant for deployment

Require.js is usually used only in development. For production almond + r.js is usually used to create a minified source for the entire application. This workflow does not make a ton of sense for an angular application though, and trying to support require may "over time" lead to problems.

Internally we have discussed making a single file famous.min.js that has a global object that has keys associated with each of the modules offered. So something like Famous["core/Context"] will return the context object... this is pretty much the exact same pattern you guys are already using

Once this version of famous.min.js is available I think moving forward should be rather painless!

Requirements list not updated

"famous/views/Deck" needs to be added to the requirements list in src/scripts/services/famous.js

ng-repeat isn't removing invalid children on $scope.$apply()

Test case here: http://files.heisenberg.co/famous-angular-bug-20140612/ (zip)

Steps: run test.doSomething() in JS console multiple times

Expected result: page contents replaced with the contents of test.data each time

Actual result: contents of test.data appended to the page each time

Changelog

Don't you think it would be nice to have a changelog to list the changes between the versions ?
Or at least document each release with a list of the changes.
Maybe the versions are released too fast at the moment, but it would be nice to have it at some point.

Create an account on twitter

It would be nice to have a twitter account linked to famous-angular so that we could use it when we tweet about articles / examples / ... and it would retweet it to the followers.
It would also be easier to follow the releases and It would probably give more credit to the lib too.
I know that we can follow @zackbrown but it would make more sense to have a specific twitter account I think.

fa-presenter is not defined

Still trying to get presenters to work. When I define a new presenter, I continue getting the following error:

Error: [ng:areq] Argument 'TaskPres' is not a function, got undefined

See commit fd6102521bc2b8f94d67b7425e9ddf274e505cbe on 'integrate' branch of MVCAngular in famous private beta.

Here's what I've tried to fix it:

remove ng-controller from DOM
copy fa-directive code from famous.angular.js into a fa-directive.js file in the directives folder (in my repo, I don't have separate files for each directive).

Add "famous/utilities/KeyCodes" to requirements.

ContainerSurface missing

Q: when is the ContainerSurface going to be implemented?, kind of missing the overflow hidden option.

Submodule still not pointing to proper location

This is interesting...the famous submodule is still pointing to 2bd1bd7. Tried cloning famous-angular from scratch and got the same submodule error. I'll look into this more when I get the chance. But changing the submodule commit will definitely fix this issue.

Click event inside a fa-surface

Clicking on a fa-surface does not register the click event.
@zackbrown I mentioned this the other day, just posting it here so that it stays on the radar. You can close it whenever.

add fa-input-surface directive

Suggestion: Name change for animate tag

This may be a non issue but I thought I would suggest it. There is already a tag called animate in SVG so perhaps a name change for the <animate> tag might be in order? Perhaps <fa-animate>.

setting surface color with CSS leads to "ghost" surfaces

Because the Famo.us framework creates its own version of the DOM, when we use Famous-Angular to define Famous surfaces we end up with ghost elements in the DOM that CSS is being applied to, requiring us to set ng-hide=true on elements that have CSS applied. Is there another way around this?

e.g. let's say we have a surface as follows

<fa-modifier fa-translate="[400,50]">
    <fa-surface fa-size="[100,100]" class="box">
        Text
    </fa-surface>
</fa-modifier>

and css

.box {
    padding: 10px;
    background-color: #333;
    color: #fff;
    border-style: solid;
    border-width: 2px;
    border-color: #444;
}

You will see an unsized copy of the surface at position [0,0].

Spring Transitions

trying to use spring animations but not sure how to set up the controller or html

<fa-app class="full-screen">
  <fa-modifier fa-origin="[.5, 0]" fa-translate="[bouncy.get]">
    <fa-surface fa-size="[100, 100]" fa-background-color="'rgb(5,22,48)'">
    </fa-surface>
  </fa-modifier>
</fa-app>

'use strict';

angular.module('famousAngularStarter')
  .controller('MainCtrl', function ($scope, $famous) {
    var Transitionable = $famous['famous/transitions/Transitionable'];
    var SpringTransition = $famous['famous/transitions/SpringTransition'];
    Transitionable.registerMethod('spring', SpringTransition);
    var spring = {
      method: 'spring',
      period: 1000,
      dampingRatio: 0.3
    };

    $scope.bouncy = new Transitionable(0);
    $scope.buttonFlyDown = function(){
      $scope.bouncy.set(100, {method : 'spring', dampingRatio : 0.5, period : 500});
    }
    $scope.buttonFlyDown();
    //$scope.movement = {
    //  springDown: Transform.translate(0, 300, 0), spring;
   // }
  });

Question: Routing, is there best solution

Would be great to know if anyone found the best way to implement routing into the app (with nested views). I know than zackbrown mentioned it as big-roadmap feature.

At the beginning I've thought about using ng-switch & ng-include but the code is far away from being neat. ui-router seems to be perfect but it requires solid alterations.

Are there any plans ( or work in progress ), is there anything I can start from?

$famous.find finds only one element

The method $famous.find(selector) finds just one element, since it uses element.querySelector instead of element.querySelectorAll.

134 var elems = angular.element(window.document.querySelector(selector));

should be

134 var elems = angular.element(window.document.querySelectorAll(selector));

is jquery a dependency?

Hi, I don't see jquery listed as a dependency in bower.json, though it seems to be required.

There is one instance where $ is called directly:
#569 var famousContainer = $(element.find('.famous-angular-container'))[0];
(should be angular.element instead $, no?)
and element.find is used with classes in query all over, which only works when it replaces jqLite.

Or am I missing something?

Include list of dependencies for gulp

I just got access to the library today and started to go down the list of steps in the readme and realized i didnt have gulp installed. I had to go through a bit of a list of modules in order to get it to where i could run the examples enclosed. I thought since I saved the list of modules I could contribute it back and you could document it on the install procedure as needed.

gulp
gulp-ruby-sass
gulp-stylus
gulp-autoprefixer
gulp-minify-css
gulp-jshint
gulp-uglify
gulp-imagemin
gulp-rename
gulp-clean
gulp-concat
gulp-notify
gulp-cache
gulp-livereload
tiny-lr
gulp-util
gulp-exec
express
connect-livereload

Error Running NPM Start

I ran into some trouble running NPM start, in particular this message popped up:

Cloning into 'famous-angular-docs'...
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
Clone of '[email protected]:thomasstreet/famous-angular-docs.git' into submodule path 'famous-angular-docs' failed

I was able to fix this in my situation after reading Fatal Error when updating submodule using GIT.

I changed the submodules in .gitmodules and .config to reference the public urls (e.g. 'https://' vs 'git@' as mentioned in the Stackoverflow post.

Remove jQuery dependency

Creating a fa-app without jQuery included throws ReferenceError: $ is not defined at line 20 of fa-app. Can we do without jQuery?

Adding examples to the doc

We could embed codepen examples in the doc such as what you can see on the ionic website: http://ionicframework.com/docs/api/directive/ionTabs/
It would be as easy as adding the following line in the ndoc tags: @codepen KbrzJ
See https://github.com/driftyco/ionic/blob/master/js/angular/directive/tabs.js for example.
It will then be parsed by the doc generation and the include should be generated for jenkins.
I haven't tested it yet, but it's something I kept from the ionic doc generation and it should be easy enough to make it work (if it doesn't already).
We would have to update the website to include the example in a nice way but I'm sure @andrelevi can do something nice with it.

The hard work would be to take the time to write the examples, but I think that it would be a really nice addition to the doc and easier to use than the current example repository.

attribute directive values cannot be assigned to functions if they aren't invoked

$scope.move = function(){
//return transitionable
}

//doesn't work
fa modifier fa-translate=move

//works
fa modifier fa-translate=move()

Height on fa-surface directive not being set

Super new but been trying to get this to work to not avail.

Unless Im misunderstanding:

    <fa-app>
      <fa-view>
        <fa-surface  fa-size="[undefined, undefined]" fa-background-color="'blue'"></fa-surface>
      </fa-view>
     </fa-app>

Should be enough to have the fa surface take up the entire viewport. (undefined,undefined should == max height/width of viewport right?)

Digging into it, it looks like the width is being set properly by undefined, but not the height. But didnt dig any deeper. Do you know about this and this is a bug right? Seems like pretty game breaking functionality unless Im missing something...?

bindings to size and origin in fa-modifier and fa-surface

Is there a simple way to get angular bindings to these attributes? Or is it by design (scale and translate do work)?

fa-scroll-view problems

I cannot for the life of me get fa-scroll-view to work. I have followed the instructions in both the F/A docs and the famo.us docs and I cannot work out what it is I am doing wrong.

<fa-app style="height: 600px;">
    <fa-scroll-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 1</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 2</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 3</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 4</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 5</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 6</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 7</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 8</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 9</fa-surface>
        </fa-view>
        <fa-view>
            <fa-surface fa-size="[undefined, 100]">Surface 10</fa-surface>
        </fa-view>
    </fa-scroll-view>
</fa-app>

As you can see from the example code I have provided, my example app is 600px in height, each surface is 100px in height, meaning I should see six surfaces on screen and be able to scroll down to the remaining four.

But I have no scroll bar, and I cannot use the mouse wheel either. Am I do something wrong?

I have also tried placing all of the surfaces inside the fa-view element but this just results in the stacking on top of one another rather than being laid out sequentially.