Post

entry ≠ exit. A design principle that's rarely mentioned is that entry and exit animations should not be the same. These tabs slide in, yet fade out. Why? Because we're showing intent ↓

When closing a tab, what's the intent? What are we trying to portray? In this case, we're depicting a tab ceasing to exist, disappearing. Let's start from scratch—with a touch of blur, and slight shrinking effect, we can evoke this feeling with the exit animation.

Next, the entry. When you hit the new tab button, it should feel like the tab was _created_. We can do this by starting the tab from the same colour/size/position as the [+] button, and animating it out. Notice the text too—it never stretches, and is revealed instead.

Something felt off in the last demo? It’s because the tabs didn’t animate when closing. Below, notice how they slide back to position, instead of popping into place. And the [+] button always sticks to the final tab, moving with it.

Not sure where to start with your animation? It's easy to overdo animations, particularly if they re-run often—like on every keystroke. Try skipping the entrance animation, and having a simple fade on exit. It feels responsive, snappy, and the intent feels right for most cases.

Of course this rule won't apply to every situation, and sometimes no animations are best, but always take a moment to consider if it _should_ apply. Rarely do I find the same animation on entry/exit being the optimal choice.