Toon Titles: Bear Face Bear (A GSAP experiment)

The Toon Titles I’ve made so far have all used SMIL (Synchronized Multimedia Integration Language) in SVG, which adds extra capabilities to simple CSS animations. SMIL isn’t dead but isn’t being developed, and performance is a concern, so I figured it was time to try something new.

SMIL animations can change an element’s attributes:

<animate 
attributename="cx"
from="50"
to="500"
dur="1s" />

Or control transformations, including rotations, scaling, skewing, and translations:

<animatetransform
attributename="transform"
type="translate"
from="0, 0"
to="500, 0" />

And they can even animate an element along a motion path:

<animateMotion
…
<mpath href="#yogi"/>
</animateMotion>

But by far, the most interesting aspect of SMIL is its ability to more easily synchronise animations using the begin attribute:

<animateTransform
id="dog"
type="translate"
begin="yogi.begin + 2s"
fill="freeze"
… />

NB: Watch out for a full explanation of SMIL on Smashing Magazine soon.

SMIL animations in SVG are powerful tools. They can bring a design to life without needing a framework or relying on Javascript. However, several people have mentioned that SMIL isn’t hardware-accelerated—unlike CSS and JavaScript animations—and that I should look at GSAP.

I’ve never written more than a few lines of Javascript, and I try to steer clear of frameworks whenever I can to avoid introducing outside dependencies. So this isn’t a lesson in GSAP; it’s just my experience using it for the first time while making this new Toon Title.

The minimised GSAP core script is 74Kb, and I won’t pretend to understand every byte of it, but I didn’t need to—it just worked. As Yogi and the dog in this animation move along a motion path, I also needed to include GSAP’s Motion Path plugin, which adds another 25Kb.

<script src="…/gsap/3.12.2/gsap.min.js"></script>
<script src="…/gsap/3.12.2/MotionPathPlugin.min.js"></script>

I needed two motion paths in my SVG to create the effect of Yogi moving from right to left, chased by the bounding dog. I used the opacity attribute to hide these paths:

<path id="motion-path-bears" d="…" opacity="0"/>
<path id="motion-path-dog" d="…" opacity="0"/>

<g id="move-bears">
<g id="yogi">…</g>
<g id="boo-boo">…</g>
</g>

<script>
gsap.registerPlugin(MotionPathPlugin);
</script>

In GSAP, a single animation is called a tween, and the syntax is straightforward enough that even I can get my head around it. There’s a method gsap.to, one or more targets #move-bears, and an object which contains information about the animation.

This tween has a duration of 5 seconds. It moves the bears along the #motion-path-bears path from their current position, and their X and Y positions are aligned to the bears’ centre. Then, the bears are moved up 200 to place them on the top of their path:

gsap.to("#move-bears", {
duration: 5,
motionPath: {
path: "#motion-path-bears",
align: "#motion-path-bears",
alignOrigin: [0.5, 0.5], 
offsetY: -200, },
ease: "power1.inOut",});

I wanted Boo-Boo to wobble as Yogi carried him across the screen, so I added a second tween, this time rotating him by 5 degrees over .75s. The yoyo value causes the animation to alternate backwards and forwards on each repeat.

gsap.to("#boo-boo", {
rotation: 5, 
transformOrigin: "center center", 
duration: .75,
yoyo: true,
repeat: 10,
ease: "power1.inOut" });

Whereas the bears move smoothly along an arched path, I wanted the dog chasing them to bound across the screen. First, I used GSAP’s set method to initially position the dog 3000px off-screen:

gsap.set("#dog", {
motionPath: {
path: "#motion-path-dog", 
start: 3000, }
});

Then, I added a tween, which moves the dog along its uneven path after a one-second delay:

gsap.to("#dog", {
duration: 4, 
delay: 1, 
motionPath: { path: "#motion-path-dog", … },
ease: "power1.inOut", });

The dog comprises three elements: body, ear, and tail.

<g id="dog">
<path id="dog-tail" … />
<g id="dog-body">…</g>
<path id="dog-ear" … />
</g>

I wanted the ear to move and its tail to wag while the dog moved. Those tweens are similar to how I made Boo-Boo wobble, using yoyoing rotations with different transformOrigin values:

gsap.to("#dog-tail", {
rotation: 5,
transformOrigin: "bottom left", 
duration: 0.2,
yoyo: true,
repeat: 30,
ease: "power1.inOut" });

gsap.to("#dog-ear", {
rotation: 10,
transformOrigin: "top center",
duration: 0.2,
yoyo: true,
repeat: 20,
ease: "power1.inOut" });

I’ve only scratched the surface of what GSAP can do. But now Yogi flees, Boo-Boo wobbles, the dog chases, its ear twitches, and its tail wags. The syntax felt intuitive, and the transition from SMIL was smoother than I expected. Despite my usual hesitation around third-party scripts, GSAP’s earned a place in my toolkit—and I’ll reach for it again.