A little animation can make or break a design. If the animation is done well it becomes invisible, and oftentimes you won’t even notice it’s there. Invisible animation can have the opposite effect, and become noticeable when not present. This lack of animation becomes most obvious when shifting back and forth between websites with global navigation where one has a subtle animation and the other does not. In this case, it was my Svelte Headless UI Starter which lacked the animation and stook out like a sore thumb.

Taking some inspiration from my favorite WordPress theme I decided to tackle the addition of invisible animation to the global navigation in my starter. Here I’ll share the finished result and a simple pattern you can use to obtain the safe effect. And it’s easy to achieve with utils already available in Tailwind.