flâneur

Effortless UI Spring Animations: A Two-Parameter Approach

kvin.me · 977 words · saved by 1 readers

Creating smooth UI spring animations shouldn’t be so complex. Using parameters like mass, stiffness, and damping can be both time-consuming and unintuitive. In this post, I’ll introduce a simpler method that uses just two parameters—bounce and perceptual duration—to make crafting spring animations easier and more intuitive. Before diving in, it's helpful to have a basic understanding of spring animations. If you're new to this topic, check out these resources: Animate with springs from Apple WWDC and A Friendly Introduction to Spring Physics. When configuring spring animations, there's what I'll call "The Physics Approach". This involves defining mass, stiffness, and damping (names might vary across tools) to create the animation. While you might understand the effect of these parameters on a spring, this method is often the least intuitive for creating a UI animation because there are too many possibilities and too much to think about. I think this paragraph from How Figma put the bou

Go back Effortless UI Spring Animations: A Two-Parameter Approach August 2024 Creating smooth UI spring animations shouldn’t be so complex. Using parameters like mass, stiffness, and damping can be both time-consuming and unintuitive. In this post, I’ll introduce a simpler method that uses just two parameters— bounce and perceptual duration —to make crafting spring animations easier and more intuitive. Before diving in, it's helpful to have a basic understanding of spring animations. If you're new to this topic, check out these resources: Animate with springs from Apple WWDC and A Friendly Int

saved by

related reading