Simple Hover Animations with Tailwind

3 minute read Published

Improve user experience using invisible animation with Tailwind CSS.

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.

Svelte Headless UI Starter

Launch your next Svelte app using Headless UI.

:: SvelteKit / Supabase / Tailwind CSS / Headless UI / OAuth2 / TypeScript

Launch your next Svelte app using Headless UI.

Application running in Dark Mode

Svelte Headless UI Starter is a template designed to make it easier and faster to build libre Svelte apps using Headless UI.