Best animation you have seen or created?

It could be the way I interact with the internet, but most sites I use today follow a pretty predictable set of patterns. I think this is great for usability and accessibility, but it can also accidentally narrow our sense of what’s possible on the web.

Most of the creative decisions I often see include, “What component library do you want to use?” and “What visual overrides do you want apply to it?” In other cases, it might be “How can I build a component library that fits my business's needs?” In some rare cases, it might be “What CSS library/framework can I adopt for my use?”

On most sites, the most surprising flow I might find is some sort of drag-and-drop behavior on a DOM element. Even rarer might be a position transition animation, for instance, a dropdown that slowly opens up.

I spent some time thinking about this and realized I have a personal website with no stakeholders where I could take a weirder path if I so choose. Armed with this observation, I created some animations and generally weird or atypical patterns. While I still don't fully like the outcome, it was a neat excuse to attempt strange CSS patterns I wouldn't normally try, as well as some 2D canvas work that I almost never get to do.

In the spirit of finding more interesting animations or patterns out there, what is the best animation you have ever created or seen on a website?

Comments

[Guilherme Zaia]

Personal sites = zero stakeholder lab. That's where I test C# APIs vs. REST latency or bake weird Blazor animations before pitching them to clients.

Best animation? A loading spinner that was actually a .NET progress stream piped to CSS custom props. Devs thought it was magic—just Server-Sent Events + paint worklets. Performance > pizzazz.

[Jeff Riggle]

It's pretty amazing what you can do with CSS custom props. I will admit I got a bit burned by silverlight in the past so I have been hesitant to pick up Blazor. Sounds like it might be a fun experiment to try.