Famin - first look

Ok, finally have something to show! But first, some eye candy… 500 transitionables at 60fps :>

You can try it out at

Just change the #500 at the end to however many nodes you want and reload the page. I admit the 500 is only on my desktop without much else happening :smile:

It looks a bit overwhelming at first but if you focus your attention on a single node, you can get a sense for transition smoothness.

The basic “user” code is as follows, as you can see, kinda famousy:

var randomPosition = function() {
    return Vec3(
      Math.random() * (width - 50),
      Math.random() * (height - 50),
      (Math.random() * 1000) - 500

  var num = location.hash && location.hash.substr(1) || 100;
  window.n = Array(num);
  for (var i=0; i < num; i++) (function(i) {
    var node = window.n[i] = new Node.instance();
    node.addComponents(DOMElement, Position);
      'hsla(' + (360/num*i) + ', 100%, 50%, 0.8)');

    var toRandomPosition = function() {
        { curve: 'inOutElastic', duration: 500 + Math.random() * 1500 },

    window.setTimeout(toRandomPosition, Math.random() * 1000);

So what’s done so far:

  • Good start for garbage collection, pooling, etc.
  • Early node structure, draft components
  • DOM Renderer (all via a message queue, but no workers yet)
  • Famous’ Transitionable.js, not optimized yet!

Must stress that this is still very early code. From here I want to work a lot more on optimizations, fix some API stuff (implement a base Scene!), tests, etc. But it’s a decent start! I still wouldn’t really look at the source yet, there are some big improvements planned.

Commit used:

1 Like

Very nice. It’s in good shape for something so early in development (it runs! :smile:).

@gadicc I wonder if box shadow is affecting any performance? Seems pretty good to me.

If I were a browser maker, I’d certainly ensure that the drop shadow is only calculated one time, since it doesn’t need to change on each frame, and after being generated is basically just a set of pixels with transparency. So my hypothesis would be that Chrome devs already thought about that. :laughing:

    var toRandomPosition = function() {
        { curve: 'inOutElastic', duration: 500 + Math.random() * 1500 },

^ Regarding animation, would it be better to not have any method for animating properties on a Node directly, and instead do that entirely outside of the node then set the Node’s properties (similar to what Famous does now)? @talves, you’ve been thinking about this a lot, what do you think?

Gadi has brought famin to our mindscape. My mind is starving for more. :laughing:

Lol. Let’s hope my final project name suggestions are better than my working names :smile:

@talves, yeah, as @trusktr said, the squares are painted once by the browser and uploaded to the GPU… opacity just goes to alpha, it’s not a problem. I actually didn’t realize this either, and just thought, “let me add box shadow and see what happens”. Nothing changed :> I think I recall though that box-shadow AND border-radius is a performance killer, but I don’t remember the specifics.

@trusktr, agree, permanent animation should be handled by components. But animations that don’t repeat should use setPosition.

Latest updates, after screwing around A LOT I finally have my worker implementation back to the same performance level as non-workers (sounds counter intuitive, I know). Obviously though this scales well so as computations get more intense, it no longer affects rendering. I’ll maybe post some stuff I learnt elsewhere. Demo (it looks pretty similar) is at http://gadi.cc/famin (demo2).

1 Like

That is exactly the same reason I mentioned it. Maybe in other browsers besides Chrome it is a problem.

@gadicc Mind generating source maps for your example bundles? If that’s too hard to do in JSPM, I’d suggest Webpack.

@joe, oh, I didn’t really intend for anyone to use it yet :> in fact, i don’t think it’s even useable :> I was mostly focusing on rendering performance, I hope this coming week I’ll clean up the API and support more general code.

Let me know if you still want a source map (the “dist” build process does generate them, I just didn’t include it)… also with jspm, you can run straight off the source without bundling first (which of course will get a lot faster with HTTP/2). I’d suggest maybe waiting until things are a bit more formalized… unless you’re profiling performance now and need the source map for that, in which case I’ll make something available now… or just clone the repo and use the build/dev lines from the README… the exact commit for each demo is listed at http://gadi.cc/famin)

Thanks for the early checkout :slight_smile:

@gadicc I just wanted to check out what the end user code would look like. I’m designing my prototype right now, with a top down approach, thinking about what API i’d like to have as an end user, so that’s it’s really easy to do things. Famous Engine’s way of adding animations by creating components is too verbose. I want to come up with something a lot simpler.