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 | Positioning
3
archive,category,category-positioning,category-3,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

Positioning

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

Animated Dots Icon

So, there I was, having a casual call with a friend of mine a few days ago. We used Skype to share some files, when I noticed that program has a circular processing/loading icon, which consists of a chain of small dots, running one after another....

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

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