Best animation you have seen or created?

Source: Dev.to

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?