You're receiving this email because you wisely signed up at
View this email in your browser

Walking, catching a tossed ball, balancing on a beam, popping a floating bubble. Behind these seemingly simple act are tons of physics with a complex set of forces at play that we're rarely even aware of. Our brains are hardwired for these subconscious calculations, and visual stimulus can trigger almost instantaneous reactions.

How does this connect to animation? These neural pathways provide an intuitive design language we can utilize to help users understand our interfaces. Instantly snapping from one view to another feels unnatural. Instead, give your interface a natural feel that users don’t have to think about by having elements slowly accelerate and decelerate when they move positions, snapping pieces into place, and responding directly to user input such as touch, clicks and movement.

In the links below, we've put together some great examples and tools that emulate the real world. We hope they help inspire and empower you to bridge the gap between the user and the interface with life-like animation.

– David Khourshid & Stephen Shaw (AKA, the @keyframers)

This gooey mind map editor by Ada Rose Cannon is a highly interactive and fun example of physics and SVG filters in a useful application.


[Demo] This demo of elm-physics at work by @unsoundscapes is a clever example of drag-and-drop physics animation and ray-tracing. Try stacking the boxes on top of each other!

[Tutorial] Matt G. Perry demonstrates the cool new features of the Framer API, which includes constraint-based and elastic drag animations. He works for Framer now, so expect more neat tricks and tips from him in the future.

[Video] Fun Fun Function published an episode titled "Animating with React Spring" where Mattias Johannson (@mpjme) tries out react-spring library for the first time in a fun, informative video.

[Tools] React-Spring is a React library that allows you to "bring your components to life with simple spring animation primitives". It provides an intuitive, simple React API for adding spring-based animations to your apps, and even has custom React hooks!

[Book] The Animation At Work book by Rachel Nabors is a wonderful guide on animation beyond just a “decorative” addition. From the science and psychology behind animation to how you can adopt meaningful animation in your team, this book will help you lay the foundation for creating great animations.
Love the newsletter? Your support keeps us going!

Contribute to our Patreon,
submit a link, or simply forward it to your friends
Modal Mitosis 🦠 CSS-Only Gooey Content Toggle
Fun tutorial on building a delightful goo expanding content area
Video | Demo

Watch the @keyframers collaborative coding live stream  
Mondays @ 17:00 EST (21:00 GMT) on
Subscribe at for past episodes and more.
Copyright © 2019 Tin Magpie, All rights reserved.

unsubscribe from this list    update subscription preferences