• Koen Bok, almost 6 years ago (edited almost 6 years ago )

    FWIW here are some thoughts I have on famo.us (the actual framework, not the company). Both positives and negatives, and trying to explain some facts that I thought could be clearer. It might be a little bit advanced for everyday designers, but I tried to put it as much in laymans terms as possible.

    Disclaimer: I make Framer (http://framerjs.com), a prototyping framework that is based on the same idea of gpu accelerated animations in the browser.

    Using matrix transforms to animate has been working well for Framer. iOS performance is hard to get below 60fps, and Android is getting better every day. One thing that Framer (on purpose) does different is use CSS keyframe animations over requestAnimationFrame.

    The upside of the keyframe approach is that you get better performance because the browser doesn't have to do any javascript while animating. With using animationFrame, it needs to calculate and draw every object each frame. That means it will become slower when you have more going on, and once it takes longer than 16ms (your frame budget) you will go below 60fps and lose that smoothness. There are also more advanced issues that can cause stuttering with this approach around the way javascript handles memory (garbage collection).

    The upside of the animationFrame approach is control. Because you need to pre calculate the entire animation with css keyframes, it's hard to change it in-flight. That is not good when you want to do more dynamic/adaptive animations like a scrollview or real physics with external influences. This is also why I'm adding an animationFrame backend in Framer 3, so you can get the best of both worlds.

    Another thing that can hurt performance is animating properties that are not gpu accelerated. For example, scaling a div is accelerated because the browser can just tell the gpu to scale. But everything in it will be stretched/pixelated because it will just work for the current pixels that the gpu knows about. Now, if you would instead animate the width and height, the browser will re-render and re-upload the pixels to your gpu every frame. The result is that every frame will be sharp, but the animation a lot slower. Also, elements can influence each other thus cause each other to re-render. Famo.us seems to do something smart around that (keeping your dom flat) to avoid re-renders as much as possible. Cool stuff. The downside is that your usual knowledge about the dom (or: just messing around in the inspector) doesn't apply anymore.

    The famo.us api seems pretty complicated for designers/prototypers. You have to set up your own transforms and modifiers etc. I think it was more designed for application builders than prototypers. That's good if you want to understand how it works from a computer perspective, but pretty hard to just throw a simple animation together.

    It's very cool (and a lot of work) that they include complete custom elements like a scrollview. The ones I tried out did not feel perfect yet, but I think that's just tweaking. It even includes a full physics engine (not the same one as Apple uses by the way). Also very cool. I wish it was a bit easier to use, but that is a hard problem to solve. Right now it's as hard/easy as any other one.

    In my experience, this entire approach only works really well in webkit based browsers. Me and others have tried to get it to run in FF and IE9 but we quickly ran into performance issues or small implementation differences. But maybe they solved all that. Still, I'd be hesitant to implement something in it that needs to work perfectly cross browser. Please test before you do that.

    Other small things are that I find some of the names a bit confusing (surface vs. view or layer) and I can't click demos on the site (do I need to log in?).

    I wish the famo.us guys/girls the best and am curious to see what people will build with it.

    17 points
    • Ale MuñozAle Muñoz, almost 6 years ago

      Wow. Just wow.

      Thanks for taking the time to write and post these notes.

      0 points
    • Grant Custer, almost 6 years ago

      Thanks for writing this up. Very interesting.

      0 points
    • Joe BlauJoe Blau, almost 6 years ago

      Great writeup, I think that everyone who was at the launch event has invites to get people access to the app demos. So I might have one if you want it.

      In my experience, this entire approach only works really well in webkit based browsers.

      Their initial market is targeting iOS and Android platforms which are both webkit based. From what I've gathered, they aren't focusing on the web as their first target seeing as how consumers aren't really focusing on web either

      The demos that they've built recreating a lot of the capptivate animations are amazing. Also, compared to writing objective-c, it's a breath of fresh air.

      1 point
  • Valtteri KarestoValtteri Karesto, almost 6 years ago (edited almost 6 years ago )

    Thanks for the great post! I'm really interested to try it out so if you have spare invites I would love to have one!

    0 points