Toon Titles Series 1. More than just a fun side project

Mike’s project included subtle CSS animations, which reminded me how much I love classic Hanna-Barbera cartoons, especially Dastardly and Muttley in Their Flying Machines, The Perils of Penelope Pitstop, and Yogi Bear. I wanted to delve deeper into web animations, learn more about the technologies available, and see how a little animation could add an extra dimension to what were static title cards.

CSS can create incredible ambient animations

Even with keyframes and scroll-based animations, CSS animation is still relatively rudimentary. But that’s part of its charm, and doesn’t mean it’s incapable of creating incredible ambient animations.

I didn’t animate much in the early title cards I tackled. In Brainy Bear, the waves of energy flowing around Yogi fade in and out sequentially using a combination of CSS opacity and separate animation-delay values to create the pulsing effect.

See the Pen Brainy Bear SVG animation by Andy Clarke (@malarkey) on CodePen.

The dome of the crazy scientist’s machine moves up and down using an infinitely looping keyframe animation and translateY. This is what I call “ambient animation,” as it helps create atmosphere and is unobtrusive.

As my eyes became attuned to elements that could be animated, and I grew accustomed to the idea of splitting my SVG illustrations into multiple animatable parts, my CSS animations gradually got more complex. In the far more detailed Bewitched Bear title card, Yogi has stolen a witch’s broom to help him grab “pic-a-nic” baskets.

See the Pen Bewitched Bear CSS/SVG animation by Andy Clarke (@malarkey) on CodePen.

I wanted to animate virtually every element in this Toon Title, from the sparkling stars to Yogi’s stolen broom, and Yogi himself with his moving head and body, and flapping tie.

CSS is great for simple, ambient effects, but it can get fiddly when animations need to be synced. I relied on animation-duration and animation-delay properties for the timings in most of my early Toon Titles. But then I remembered SMIL, and that took me down a new path.

SMIL isn’t dead, and it enables animation sequences

SMIL (Synchronised Multimedia Integration Language) was introduced in 1998 for synchronising multimedia. It was built into SVG 1.1, which is why we can still use it there today.

SMIL adds the animate property to SVG, which enables animations based on one or more of an element’s attributes. It also adds animateTransform to animate transformations, including rotations, scaling, skewing, and translations. Then there’s the begin property for starting and sequencing animations, and animateMotion for animating along motion paths.

In Bear for Punishment, Yogi conjures Boo-Boo from a magician’s top hat.

See the Pen Bear for Punishment, SMIL animation by Andy Clarke (@malarkey) on CodePen.

I used a CSS keyframe animation to fade, rotate, and scale the sparkles from Yogi’s magic wand, but the moving spotlight and Boo-Boo’s entrance were both created using SMIL’s animateTransform.

Brave Little Brave took SMIL even further. First, the little brave enters the frame, then the circle behind him appears. He releases his bow strings and looses an arrow which moves the title text. animatetransform moves the figure from -1000 off-screen and makes his ponytail wobble. animate changes the bow strings’ d values as the arrow is fired.

See the Pen Little Brave Bear, SMIL animation by Andy Clarke (@malarkey) on CodePen.

But, the big difference in this animation lies in how SMIL synchronises the animations. The arrow in the brave’s headband moves as the arrow is fired, and the title text wobbles when the arrow hits it. I could’ve created these effects with animation-duration, but it was far cleaner and easier using SMIL.

GSAP is powerful and now free

You may already know that scripting isn’t my thing, which is why I was reticent to try a JavaScript-based animation library. I read an article which recommended GSAP over SMIL, so I decided to see if I could get to grips with it.

GSAP (GreenSock Animation Platform) is now part of Webflow who made it and its plugins free this month. It’s taken me a few weeks to feel comfortable using GSAP, but I think I’m beginning to get the hang of it.

For Snow White Bear, GSAP made it relatively straightforward to animate Yogi and his seven dwarfs. Yogi walks onto the screen and is followed by each dwarf in turn.

See the Pen Snow White Bear, GSAP animation by Andy Clarke (@malarkey) on CodePen.

The titles fade in when the characters are all in position, and if you look closely, you might spot the trees swaying gently.

In Lullabye-Bye Bear, I combined GSAP with CSS 3D perspective to create the animation of Yogi swinging in his hammock.

See the Pen Lullabye-Bye Bear, GSAP animation by Andy Clarke (@malarkey) on CodePen.

As Yogi swings backwards and forwards towards the viewer, the titles above him also gently swing between the tree branches.

Then, in Duck in Luck, the dog gets taken by surprise when a duck creeps up behind him.

See the Pen Duck in Luck, GSAP animation by Andy Clarke (@malarkey) on

His tail stops wagging, his ears shoot up, and he puts his paws in the air. This animation wouldn’t be possible using CSS or SMIL, but GSAP’s MorphSVG plugin made it easier to flip the dog’s ear and change the d values of his front paws to put them above his head.

More than just a fun side project

Creating Toon Titles Series 1 was more than just a fun side project—it was an excuse to explore the quirks and possibilities of web animation. I learned how to push CSS further than I thought it could go, rediscovered SMIL, and finally wrapped my head around GSAP (and even started to enjoy it.)

I hope this gave you a few ideas, and I have a lot more to explore. So, stay tooned.