Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at Leaff.it/ I really love famo.us framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Categories
Meta
Famo.us Code | 2014 July
0
archive,date,paged,paged-2,date-paged-2,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

July 2014

Scrollable list view with modifiers

It was once asked on IRC how to apply a modifier to an item in the Scrollview, based on it's actual location in the visible region. Here, I will show you one way to achieve it. First, you add a physics engine and attach a particle body to it: [pastacode lang="javascript"...

Widget with Surface Events Piped

There are times when you want to create a View that has a Surface attached.  The issue is there is a need for the Surface to broadcast it's own events to the view. Here is the trick to making sure you pipe from to the view: surface.pipe(view._eventOutput); The following shows...

Sizing a Surface within your Stylesheet

Someone asked how they would be able to size a Surface within famous using a stylesheet. Seemed simple enough, but upon first try my render of the object within famous would overwrite the sizing of the object. The trick is to size your surface with [true,...

An in-depth look at images in famo.us and sizing-modes

Famo.us supports various modes for setting the size of an image. As is true for all surfaces, you can set the values of the `size` array to any of these values: undefined (sets the width/height to same as its parent) true (sets the width/height to the real size of...

FlexibleLayout in a ScrollView

You can't use a FlexibleLayout to "sequenceFrom" in a ScrollView, because FlexibleLayout does not return a proper size. So the Scollview gets confused and does not know how to render properly. If you wrap the FlexibleLayout in a Size modifier, and add the Size-modifier instead, everything...

RadioItem component

Useful to create Tabs or Options. Initialize the RadioItemView with an (empty) array and a surface. The RadioItemView adds itself to the array - you can use this Array to "sequenceFrom" in a Layout. Use item.select() to select it - it emits a "select" event (with the index as...

How to wrap a RenderController up in a RenderNode

RenderNodes are the gods of StateModifiers. If you want to make a StateModifier for any form of renderable(EG A RenderController, A View, A Layout or even ANOTHER RenderNode), wrap it up in a RenderNode to make it constrain all of it's children to it's state.   See...

Material design’ish button animation

I recently did a proof of concept for a material design like button animation. The animation consists of 3 surfaces, which are animated using StateModifier's. The size, position and rotation are modified to get the resulting effect. [wp-js-fiddle url="http://jsfiddle.net/IjzerenHein/X8F9u/" style="width:100%;height:400px;border:solid #4173A0 1px;"] The original code can be found...

Simple Widget with Auto Size

Quite a few developers in Famo.us ask about getting the size of the parent from their view.  I have written a simple widget to show how you can update your widget based on the parent size changing. In this case, the widget is added to the main context,...