Animating Layouts with the FLIP Technique

Last updated 1 year ago by David Khoroshid

javascript

User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this - as Nick Babich said, animation brings user interfaces to life. However, adding meaningful transitions and micro-interactions is often an afterthought, or something that is "nice to have" if time permits. All too often, we experience web apps that simply "jump" from view to view without giving the user time to process what just happened in the current context.

This leads to unintuitive user experiences, but we can do better, by avoiding "jump cuts" and "teleportation" in creating UIs. After all, what's more natural than real life, where nothing teleports (except maybe car keys), and everything you interact with moves with natural motion?

In this article, we'll explore a technique called "FLIP" that can be used to animate the positions and dimensions of any DOM element in a performant manner, regardless of how their layout is calculated or rendered (e.g., height, width, floats, absolute positioning, transform, flexbox, grid, etc.)

Read full Article