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 | Components
4
archive,category,category-components,category-4,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

Components

Cube Globe (Clobe)

A cube component with open street map data on it. [wp-js-fiddle url="http://jsfiddle.net/trusktr/9etv5L3y/" style="width:100%;height:400px;border:solid #4173A0 1px;"]...

SwipeSync for Famo.us

The SwipeSync component allows you to have simple swiping support in four directions. Personally I use these for app navigation. Swiping east (left to right) means go back to the parent page (eg if the current location is home -> categories -> pie: go to categories) Swiping west means...

Quadrantik View

An excerpt from my earlier post on Codepen: I've called this layout a Quadrantik View. The name comes from the symbiosis of the math quadrants of the Cartesian plane and my nickname. I know, I'm bad with naming the stuff :/ Quadrantik takes an array of 4...

Using ContainerSurface to create a Ken Burns animation effect

ContainerSurface & clipping In famo.us, surfaces are typically added to a flat DOM using absolute positioning. This is what gives famo.us its awesome performance and makes almost anything possible. A consequence of this is that all surfaces are treated equal and the z-position is important for the...

Scrollview: goToFirst(), goToLast(), goToIndex(i)

Hi everybody, Currently (0.2.2), Scrollview lacks a few functions: goToFirst() goToLast() goToIndex(i); According to Github, this will be solved soon. In the meanwhile, we can use a little hack. Check out Gist and fiddle below: [wp-js-fiddle url="http://jsfiddle.net/markmarijnissen/t2z4Q/42/" style="width:100%;height:400px;border:solid #4173A0 1px;"] The hack involves exploiting the default ViewSequence Backing to find the first or...

Quickly setting margins using BoxLayout

Sometimes you need to specify margins for a renderable relative to it's parent. You can use modifiers to change the size and the offset. This is pretty straightforward, but can only be done when you know the size of the parent: // parent with fixed size var...

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"...

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,...

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...