Toon Titles: Nowhere Bear (A GSAP animation)

I’ve barely scratched the surface with what GSAP can do, and writing its code doesn’t feel natural yet. But I’m getting there, becoming more familiar with the syntax and how to structure the elements in my SVG to get them ready for animating. Here are a couple of things I learned while making this Toon Title.

First, the setup of my SVG. I have three main groups: Yogi, Ranger Smith, and his high-energy zaps:

<svg …>
<g id="ranger">…</g>
<g id="zaps">…</g>
<g id="yogi">…</g>
</svg>

For this animation, I want:

1. Ranger Smith to move from off-screen to his natural position
2. Zap Yogi with hypnotic rays
3. Yogi to rise up, rotate to a horizontal position, and fly off to the left
4. Ranger Smith to turn and move back off-screen

So, I constructed the animation in that order. Every element in an SVG has a natural position based on its coordinates. I can override that using GSAP’s set method, which places the ranger 2500px to the right of his natural position and pushes him off-screen.

<script>
gsap.set("#ranger", { x: 2500 });
</script>

Ranger Smith then moves into position using the .to method and overshoots his mark by 30px to create a more realistic entrance:

gsap.to("#ranger", {
x: -30,
duration: 2,
ease: "power4.in"
});

(GSAP has easing options and a useful visualiser in its docs which explains the ease property better than I can.)

After the overshoot, Ranger Smith then moves back to his natural position (0):

gsap.to("#ranger", {
x: 0,
duration: 0.2,
ease: "back.out(3)",
delay: 2
});

For a reason that’s best explained by watching the cartoon, Ranger Smith hypnotises Yogi, represented in the title by zapping him with hypnotic rays. I have paths with two colour fills (#fff and #daca85) and can use the contents of their fill attributes to create an array:

const whiteZaps = gsap.utils.toArray('#zaps path[fill="##fff"]');
const goldZaps = gsap.utils.toArray('#zaps path[fill="#daca85"]');

I wanted the rays to flash randomly, but I didn’t like the complication of coding each one individually. So first, I set both types’ initial opacity to zero which makes them invisible:

gsap.set([whiteZaps, goldZaps], { opacity: 0 });

Then, I created a function which sets up the flashing rays:

function flashPaths(paths, delay = 0) {
return gsap.timeline({ delay, repeat: 30, yoyo: true })
.to(paths, {
opacity: 1,
duration: 0.05,
stagger: { each: 0.02, from: "random" }
})

.to(paths, {
opacity: 0,
duration: 0.05,
stagger: { each: 0.02, from: "random" }
});
}

This function takes two arguments: the paths I want to animate and a delay before starting the animation:

function flashPaths(paths, delay = 0) {
return gsap.timeline({ 
delay, 
repeat: 30, 
yoyo: true })

.to(paths, {
opacity: 1,
duration: 0.05,
stagger: { each: 0.02, from: "random" }
})

.to(paths, {
opacity: 0,
duration: 0.05,
stagger: { each: 0.02, from: "random" }
});
}

The animation repeats 30 times and yo-yos backwards and forwards, perfect for creating the zapping effect. Each path switches between visible and invisible every .05 seconds. The fun part is the stagger, which adds a delay between the start of each animation. Each ray flashes after the previous one, but by appearing random, the rays feel more realistic.

Once I had the function, I could call it. The white rays start flashing one second after Ranger Smith stops moving, while the gold rays begin their animation .15s later:

flashPaths(whiteZaps, 3.2);
flashPaths(goldZaps, 3.35);

GSAP timelines are a way to chain sequences of animations. When Ranger Smith’s hypnotic rays hit Yogi, I wanted him to rise into the air (1,) spin from vertical to horizontal (2,) bounce up and down (3,) then fly left and off the screen. My first task was to create a timeline for Yogi, which starts after the ranger and his rays have finished animating:

const yogiTl = gsap.timeline({ delay: 4.4 });

I then applied that timeline to each of Yogi’s animations in order, first by rising into the air and rotating:

yogiTl.to("#yogi", {
y: "-=80",
rotation: -90,
duration: 0.3
});

Then bouncing up and down by 5px for 5s:

yogiTl.to("#yogi", {
y: "-=5",
duration: 0.15,
yoyo: true,
repeat: Math.floor(5 / (0.15 * 2)),
});

Before finally exiting stage left:

yogiTl.to("#yogi", {
x: -1100,
duration: .25,
});

Finally, having succeeded in hypnotising Yogi, Ranger Smith turns and zips away to where he started from. The scaleX property and a value of -1 flips the ranger’s direction from left to right.

gsap.timeline({ delay: 9.65 })
.to("#ranger", {
scaleX: -1,
transformOrigin: "center center",
duration: 0.2,
ease: "power1.inOut"
})

.to("#ranger", {
x: 2500,
duration: 1.2,
ease: "power2.in"
});

This Toon Title was my most extensive GSAP animation challenge so far and the most fun I’ve had with it. I’m starting to get a feel for how timelines work, how to structure SVGs so they’re easier to animate, and how powerful even the smallest bit of easing or stagger can be when injecting character into flat artwork.

More Toon Titles coming soon as I’ve got my eye on a few more Yogi Bear episodes.