Physics and Web Animation

| Comments

In the first ever online Animation Hootenanny, an audience member asked if physics engines would ever come to the browser. A physics engine is a concept you might know from game development. It’s a supreme formula that dictates how reactions occur, like how far an object bounces if your character throws it across the room. Such an engine would be useful for interpreting the momentum of a scroll or the bounce back of a failed drag and drop.

Ralph Thomas wrote a fantastic post with demonstrations on applying physics to UI animations. Research shows even infants have a deeply embedded concept of momentum and other physical interactions. Naturally, accomodating and imitating that kind of real world physics may help humans of all ages use digital interfaces more intuitively. Sadly, a genuine physics engine isn’t likely to become a baked-in browser feature with an API just yet.

Ralph created gravitas.js to bring gravity and physics to UI on the web. So far it seems to be the most holistic yet decoupled solution for supplying the browser with laws of physics. The framework promises “the only JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL.” For those seeking a little less god-like authority over physics present in their infinite canvas may want to look into Interact JS, a library offering drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers, including IE 8+.

But I am curious, how do you build physics into your UI ecosystems? I’d love to know if anyone’s had experience creating such a thing.


comments powered by Disqus

Conference Schedule

Do you love web animation and digital storytelling?

Sign up for my mailing list and get updates when I post new projects, blogs, workshops, and shennigans.

Join my mailing list
Copyright © 2008 – 2019 Rachel Nabors