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.

[MaxxMini]

The canvas work is where things get really interesting. I built a bunch of browser games as side projects and the moment you leave the DOM for raw canvas, the creative space opens up completely.

One pattern that surprised me: using requestAnimationFrame with delta-time interpolation for smooth 60fps particle systems. For a tower defense game, I needed hundreds of projectiles + explosions simultaneously. The trick was object pooling — pre-allocate arrays instead of creating/destroying objects per frame. GC pauses during gameplay are the silent animation killer nobody warns you about.

Another one: CSS box-shadow as a creative tool. You can generate entire pixel-art sprites with nothing but box-shadows on a single div — each shadow is essentially a pixel. It's absurdly impractical but visually fascinating, and it taught me more about the rendering pipeline than any tutorial.

For your site specifically — the decision to go weird on a personal site with zero stakeholders is underrated. That constraint-free space is exactly where you stumble into techniques that eventually make it back into production work. The 2D canvas patterns you mentioned are a great example. What kind of canvas work did you end up doing? Procedural generation? Physics simulations?

The drag-and-drop observation is spot on. Most of the web has converged on such a narrow band of interaction patterns that even basic keyframe animations feel novel to users now.

[Jeff Riggle]

That sounds like a lot of fun. I always find myself interested in games, but then remember I don't have the skills to generate decent sprite sheets or game assets.

In my case I added a glitching effect to a button that when pressed would transition to a 2d canvas. This would use a character map data structure that was basically a sparse 2d array for rendering text on a coordinate system in the canvas. The end effect was to transitions with different character movement landing on a final page that would do a particle effect when you clicked on the screen.

I did find the timing loop to be a bit of a challenge. Basically I wanted to force a lower frame rate say 30 fps to reduce power consumption, but the code I had to use for that didn't quite get what I wanted. Basically this created a "no more than 30fps" effect and had to use requestAnimationFrame and setTimeout