finds.dev← search

// the find

desandro/practical-ui-physics

★ 327 · JavaScript · updated Aug 2015

Learn basic physics for UI

A companion repo to a 2015 conference talk by the creator of Masonry and Flickity, covering spring physics, attraction, drag, and rubber-band bounds for web UI. Each concept gets its own standalone HTML/JS demo. It's aimed at front-end developers who want to understand the math behind the feel of iOS-style interactions rather than just reaching for a library.

The demos are minimal and self-contained — no build step, no framework, just a JS file and an HTML file per concept. That makes the physics code easy to read and copy. The progression from basic velocity/acceleration through drag and rubber-band bounds mirrors how you'd actually build up a real UI interaction. Desandro is a credible source here; Flickity uses exactly this model in production.

Abandoned since 2015 — mouse events only, no touch, which the README itself calls out as ironic for a talk about mobile-feel interactions. No reusable library comes out of this; you're copying snippets by hand. The Web Animations API, CSS spring() (now shipping in some browsers), and libraries like Framer Motion have all moved past what's shown here, so the 'why is this hard on the web' framing is dated. Low star count suggests it never gained traction as a learning resource beyond the talk itself.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →