,
14 tweets,
7 min read
Read on Twitter
#smartanimate is I've been working on for the past few months along with the rest of the awesome prototyping team @figmadesign! A lot went into this, so I want to talk a little bit about why I find this work satisfying from both a visceral and a cognitive perspective.
Let's start with the visceral. Working at Figma has encouraged me to play around with visual stuff a lot more frequently, and now this feature added the ability to play with things in motion with really little friction. Here's a silly little animation that I put together in <5min
Most of the files we used in development looked something like this...
So when people take the primitives I helped build and do stuff like this, it's satisfying in a way that goes beyond the technical challenge of writing the code that powers it.
But on that note, lemme talk a bit about some of the technical subproblems we had to solve in code to make this come together. Let's start with layer ordering. The tree of nodes used for smart animate is the merge of the before and after trees. How do we do that merge? 
Since we only match nodes at the same level of the hierarchy, you can reduce the problem to doing an ordered union of two lists. We started with something like React key resolution, but ended up changing it to support matching w/ layer re-ordering (e.g. ABC -> CBA)
Next on the docket, we have interpolation of affine transforms. If you have two linear transforms specifying the before & end state, how do you interpolate between them intuitively? Direct interpolation of matrix coefficients might causes objects to shrink during rotation.
Thankfully, the CSS spec very carefully outlines how to do this correctly: w3.org/TR/css-transfo…
Another problem that I didn't work on, but am a fan of the solution we ended up with is reconciling drag speed with an easing function. If you have an easing function set on a transition controlled by draggable object, how do you obey that easing function on drag release?
My coworker Andrew Chan came up with a clever solution accelerating the easing function using the drag velocity by figuring out the derivative of the easing curve at the appropriate progress point of the transition.
Part of why I joined Figma and have stayed for > 3 years at this point was to work on fascinating technical problems without sacrificing the ability to stay close to the product impact & without sacrificing the ability to *play* with the things I'm making
And I did get to work closely with the designer leading this effort (@nikolasklein), and our director of product (@skuwamoto). After an hour long session working out a rough product edge, Sho proceeded to philosophize on two interpretations of quantum mechanics
TL;DR: @figmadesign is a dope place to work, you should come join @lbudorick, @ryanjkaplan, @skuwamoto, @nikolasklein, and me if you want to work on cool rendering & animation problems, and/or if you want an ad-hoc lecture about quantum mechanics & hair-brained philosophy. ✌️
@figmadesign Ah fuck typo in the first sentence 😭 This is what I get for trying to edit a hashtag in
