Written by me

Written by me

Jun 20, 2026

Jun 20, 2026

1 min read

1 min read

Spring Animation

My first version of the contact button was bouncier, and I thought that made it better. It didn't. It felt cheap.

I built a button for my website that opens like Apple's Dynamic Island, a small pill that springs open into a card of links. It worked right away, but it felt wrong. Too bouncy. Like it was trying too hard. I set the bounce to 0, and that fixed it. It just settled into place, no wobble. It went from looking busy to looking clean.

Lesson

That was the main thing I learned from Emil Kowalski's course, Animations on the Web: good motion isn't about adding more. It's about adding less, until the animation just feels right and you stop noticing it. The course lets you play with live examples, which is the only way it really clicks.

The code behind it is small. Motion has a layout setting that does the hard part for you. When the size of the element changes, it smoothly springs the width, height, and rounded corners on its own. The content just fades in on top:

Final version with smoother spring animation

The hard part wasn't writing it, it was the bounce slider and knowing to drag it back to zero.