After begrudgingly installing Facebook’s Messenger app on my Nexus 5, I was thoroughly entranced by the realistically springy animations used by the app’s “chat heads” feature.

I wanted to try to replicate this as much as possible with plain old web standards: html, css, and javascript. Here’s what I threw together:

See the Pen Chatheads style animations by Matt Shwery (@mshwery) on CodePen.

Update:

After @_mculp pointed me towards Facebook’s open-source spring animation library written in Java – Rebound – I made a fork and implemented this with their javascript port. The animations feel much closer to the actual Messenger app.

I also optimized the drag positioning by handing off the actual drawing of the new x/y coordinates to a separate function that gets called every 16ms (~60fps), meanwhile the x/y coordinates get updates both by drag movements and by the spring physics resolver.

You can see the updated version here:

See the Pen Chatheads style animations by Matt Shwery (@mshwery) on CodePen.

Check out the code in action on CodePen