My first story: Moving naturally

When a user drops an item, react-beautiful-dnd uses a physics based animation to give the impression that the dropping item has weight.

Physics based drop animation

react-beautiful-dnd uses react-motion to achieve this. react-motion bases an animation on a spring rather than on traditional animation properties such as curve and duration. Using a spring helps give the drop a weighted feeling as we can define an animation using physical properties such as stiffness and damping.

I approached a colleague of mine at Atlassian, Jacob Miller, with this proposal:

“Can we create the same or similar animation using only CSS? Ideally, if it could look the same that would be great, but I would be happy if we could find a CSS animation that was almost the same.”

If we could use CSS for the drop animation then we could remove react-motion to lower our bundle size, as well as moving the workload for the drop animation off the main thread of the CPU to the GPU.

Without looking at the code itself, Jacob plotted the percentage of the distance travelled of dropping item against the percentage of the time taken for the animation to complete. What he found was that regardless of where the user dropped, it produced a consistent animation curve. The only thing that changed was the duration.

With this information, I was able to achieve the exact same drop animation that react-motion provided, using only a CSS animation with a dynamic duration

Result curve [cubic-bezier(.2, 1, .1, 1), with duration 0.33s — 0.55s]

This change resulted a 66% performance improvement when dropping in big lists on less powerful devices. I also found a 25% performance improvement when dragging, long before a drop animation has started. This is because we no longer need to pay any cost for passing values through react-motion

Our use case only involved a one time animation with a consistent spring value for all drops. This made it a great candidate for a CSS animation. More complex animations would still require an animation library.

Adventure for another: Spring to CSS