Blogging and all that Malarkey

What do Yogi Bear cartoons and CSS animations have in common? More than you think. In this video, I show how low-budget animation techniques from Hanna-Barbera cartoons—like background loops, talking heads, and minimal movement—can inspire expressive, lightweight web animations using only CSS and SVG.

Working on a design for composer Mike Worth gave me an idea. What if I created animated title cards inspired by classic Hanna-Barbera cartoons? Thirty-five SVG animations later, Toon Titles Series 1 is complete. These are based on artwork from the first appearance of Yogi Bear in The Huckleberry Hound Show.

It’s fascinating just how many opportunities for animations there are in a static cartoon title card. Here’s another Toon Title, this time based on Prize Fight Fright, a Yogi Bear cartoon from February 1959.

Yours truly guesting in a fun episode of the Boagworld podcast. “Why do so many websites feel like colored-in wireframes? Why personality in design still matters, and how to bring it back.”

Yours truly over at the Smashing Magazine: “Now, you might’ve heard that SMIL is dead. However, it’s alive and well since Google reversed a decision to deprecate the technology almost a decade ago. It remains a terrific choice for designers and developers who want simple, semantic ways to add animations to their designs.”

This time, I put GSAP and SMIL to one side and made a Toon Title using only CSS animations. It’s based on Bewitched Bear, a Yogi Bear cartoon from January 1960. I’ve written a detailed write-up on optimising SVGs for animations which will be published on Smashing Magazine over the next few weeks.

Yours truly over at the Smashing Magazine: “What if you could take your CSS animations beyond simple fades and slides—adding an extra dimension and a bit of old-school animation magic?”

Yours truly over at the Smashing Magazine: “Have you ever thought about how the limitations of early cartoon animations might relate to web design today? From looping backgrounds to minimal frame changes, these retro animation techniques have surprising parallels to modern CSS.”

Website design in the ’90s was messy, but it was also magical. It was frequently fraught with accessibility, performance, and usability problems that took us years to solve. But while we addressed them, we discarded much of what was captivating about early websites and replaced them with conservative, commodity designs.

The more I dive into using the GSAP library for my Toon Title animations, the more I enjoy it. Here’s another Toon Title, this time based on Space Bear, a Yogi Bear cartoon from February 1960. I learned some new things while making this Toon Title, including how to use GSAP’s timeline feature.