Smashing Animations Half 1: How Basic Cartoons Encourage Fashionable CSS

Browser makers didn’t take lengthy so as to add the motion capabilities to CSS. The straightforward :hover pseudo-class got here first, and a bit later, the transitions between two states. Then got here the power to alter states throughout a set of @keyframes and, most lately, scroll-driven animations that hyperlink keyframes to the scroll place.

Even with these added capabilities, CSS animations have remained comparatively rudimentary. They remind me of the Hanna-Barbera animated sequence I grew up watching on TV.

These animated shorts lacked the budgets given to live-action or animated films. They have been additionally far decrease than these out there when William Hanna and Joseph Barbera made Tom and Jerry shorts whereas working for MGM Cartoons. This meant the animators wanted to develop methods to work round their value restrictions and the technical limitations of the time.

They used fewer frames per second and much fewer cells. As an alternative of utilizing a distinct picture for every body, they repeated each a number of instances. They reused cells as often as attainable by zooming and overlaying further parts to assemble a brand new scene. They saved our bodies primarily static and overlayed eyes, mouths, and legs to create the phantasm of speaking and strolling. As an alternative of decreasing the standard of those cartoons, these constraints created a attraction typically missing in more moderen, bigger-budget, and technically superior productions.

The straightforward and environment friendly methods developed by Hanna-Barbera’s animators may be applied utilizing CSS. Fashionable structure instruments permit internet builders to layer parts. Scaleable Vector Graphics (SVG) can include a number of frames, and builders needn’t resort to JavaScript; they’ll use CSS to alter a component’s opacity, place, and visibility. However what are some causes for doing this?

Animations deliver static experiences to life. They’ll enhance usability by guiding folks’s actions and delighting or shocking them when interacting with a design. When rigorously thought of, animations can reinforce branding and assist inform tales a few model.

Introducing Mike Value

I’ve lately been engaged on a brand new web site for Emmy-award-winning recreation composer Mike Value. He employed me to create a daring, retro-style design that showcases his work. I used CSS animations all through to thrill and shock his viewers as they transfer by his web site.

Mike loves ’80s and ’90s animation — particularly Disney’s Duck Tales). Unsurprisingly, my style in cartoons stretches again a little bit additional to the Sixties Hanna-Barbera exhibits like Dastardly and Muttley in Their Flying Machines, Scooby-Doo, The Perils of Penelope Pitstop, Wacky Races, and, in fact, Yogi Bear.

So, to clarify how this period of animation pertains to CSS, I’ve chosen an episode of The Yogi Bear Present, “Dwelling Candy Jellystone,” first broadcast in 1961. On this story, Ranger Smith inherits a mansion and (spoiler alert) leaves Jellystone.

Dissecting Motion

On this episode, Hanna-Barbera’s methods develop into obvious as quickly as a postman arrives with a telegram for Ranger Smith. The digicam pans sideways throughout a panorama portray by background artist Robert Light to create the phantasm that the postman is shifting.

The background loops when a scene lasts longer than a single pan of Robert Light’s panorama portray, with bushes and bushes showing repeatedly.

This may be recreated utilizing a single aspect and an animation that adjustments the place of its background picture:

@keyframes background-scroll {
  0% { background-position: 2750px 0; }
  100% { background-position: 0 0; }
}

div {
  overflow: hidden;
  width: 100vw;
  top: 540px;
  background-image: url("…");
  background-size: 2750px 540px;
  background-repeat: repeat-x;
  animation: background-scroll 5s linear infinite;
}

The economic system of motion was important for producing these animated shorts cheaply and effectively. The postman’s motorbike bounces, and solely his head place and facial expressions change, which provides a refined trace of realism.

Likewise, solely Ranger Smith’s facial features and leg positions change all through his stroll cycle as he dashes by his mansion. The remainder of his physique stays static.

In a discarded scene from my design for his web site, the orangutan adventurer mascot I created for Mike Value may be seen driving throughout the panorama.

I drew straight from Hanna-Barbera’s bouncing and scrolling approach for this scene through the use of two keyframe animations: background-scroll and bumpy-ride. The infinitely scrolling background works similar to earlier than:

@keyframes background-scroll {
  0% { background-position: 960px 0; }
  100% { background-position: 0 0; }
}

I created the looks of his bumpy experience by animating adjustments to the keyframes’ translate values:

@keyframes bumpy-ride {
  0% { translate: 0 0; }
  10% { translate: 0 -5px; }
  20% { translate: 0 3px; }
  30% { translate: 0 -3px; }
  40% { translate: 0 5px; }
  50% { translate: 0 -10px; }
  60% { translate: 0 4px; }
  70% { translate: 0 -2px; }
  80% { translate: 0 7px; }
  90% { translate: 0 -4px; }
  100% { translate: 0 0; }
}

determine {
  /* ... */
  animation: background-scroll 5s linear infinite;
}

img {
  /* ... */
  animation: bumpy-ride 1.5s infinite ease-in-out;
}

Watch the episode and also you’ll see these bushes seem again and again all through “Dwelling Candy Jellystone.” Behind Yogi and Boo-Boo on the observe, within the bushes, and scaled up on this close-up of Boo-Boo:

The animators additionally often layered foreground parts onto these background work to create a wide range of new scenes:

In my deleted scene from Mike Value’s web site, I launched these rocks into the foreground so as to add depth to the animation:

If I have been utilizing bitmap photographs, this is able to require only one further picture:

<determine>
  <img id="bumpy-ride" src="..." alt="" />
  <img id="apes-rock" src="..." alt="" />
</determine>

determine {
  place: relative; 

  #bumpy-ride { ... }

  #apes-rock {
    place: absolute;
    width: 960px;
    left: calc(50% - 480px);
    backside: 0;
  }
}

Likewise, when the ranger reads his telegram, solely his eyes and mouth transfer:

If you happen to’ve puzzled why each Ranger Smith and Yogi Bear put on collars and neckties, it’s so the road between their animated heads and faces and static our bodies is obscured:

SVG delivers unbelievable efficiency and in addition presents unbelievable flexibility when animating parts. The power to embed one SVG inside one other and to govern teams and different parts utilizing CSS makes it excellent for animations.

I replicated how Hanna-Barbera made Ranger Smith and different characters’ mouths transfer by first together with a gaggle that accommodates the ranger’s physique and head, which stay static all through. Then, I added six extra teams, every containing one body of his mouth shifting:

<svg>
  <!-- static parts -->
  <g>...</g>

  <!-- animation frames -->
  <g class="frame-1">...</g>
  <g class="frame-2">...</g>
  <g class="frame-3">...</g>
  <g class="frame-4">...</g>
  <g class="frame-5">...</g>
  <g class="frame-6">...</g>
</svg>

I used CSS customized properties to outline the pace at which characters’ mouths transfer and what number of frames are within the animation:

:root {
  --animation-duration: 1s;
  --frame-count: 6;
}

Then, I utilized a keyframe animation to indicate and conceal every body:

@keyframes ranger-talking {
  0% { visibility: seen; }
  16.67% { visibility: hidden; }
  100% { visibility: hidden; }
}

[class*="frame"] {
  visibility: hidden;
  animation: ranger-talking var(--animation-duration) infinite;
}

Earlier than lastly setting a delay, which makes every body seen on the appropriate time:

.frame-1 {
  animation-delay: calc(var(--animation-duration) * 0 / var(--frame-count));
}

/* ... */

.frame-6 {
  animation-delay: calc(var(--animation-duration) * 5 / var(--frame-count));
}

In my design for Mike Value’s web site, animation isn’t only for ornament; it tells a compelling story about him and his work. Each motion displays his model id and makes his web site an extension of his artistic world.

Suppose past motion the following time you attain for a CSS animation. Take into account feelings, id, and temper, too. In spite of everything, a well-considered animation can do greater than catch somebody’s eye. It may possibly seize their creativeness.

Mike Value’s web site will launch in June 2025, however you’ll be able to see examples from this text on CodePen now.