Toon Titles: Two quick gotchas about SMIL animations

Hyphenated ID values stop chained animations from working in Firefox

SMIL enables you to create a sequence of animations which either begin or end relative to other named animations. Take this Toon Titles example based on Yogi Bear’s Big Brave Bear from 1958, where Yogi enters the frame and is chased quickly after by the car. I chained the two animations together like this:

1) I gave the Yogi animation a name:

<animatetransform
id="yogi-enter"
… />

2) I set the car animation to begin one second after Yogi began:

<animatetransform
id="car-enter"
…
begin="yogi-enter.begin + 1s" />

That animation worked perfectly in Blink and Webkit-based browsers, but in Firefox, the car just never appeared. After scratching my head and comparing this chain with others I’d made for Toon Titles, I realised the problem was the hyphenated ID values.

After changing the hyphens for underscores, the car arrived in Firefox, too.

<animatetransform id="yogi_enter" />
<animatetransform id="car_enter" />

Noise filters kill performance in all versions of Safari

When you look at many of the original Yogi Bear title cards, the artwork’s background has a texture which I wanted to add to some of my Toon Titles, like this one based on Scooter Looter from 1959.

Noodling around the web, I found an SVG grain generator and used it to add a grainy layer over my SVG’s background :

<filter id="grain" …>
<feTurbulence type="fractalNoise"
…
result="turbulence">
</feTurbulence>

<feColorMatrix
…
in="turbulence" result="colormatrix">
</feColorMatrix>

<feComponentTransfer
in="colormatrix" result="componentTransfer">
…
</feComponentTransfer>

<feColorMatrix x="0%" y="0%"
in="componentTransfer"
…>
</feColorMatrix>

</filter>

<!-- noise -->
<path fill="transparent" 
filter="url(#grain)" 
d="…" 
opacity=".25" 
style="mix-blend-mode: overlay"/>

But, just applying this filter turned every other animation into a stuttering mess in all versions of Safari, from Scoob’s 5-year-old iPad to Technology Preview on my M1 Max-powered Macbook Pro with 64Gb RAM.

Needless to say, I removed the filter, and the animations moved smoothly again.

---

Those are two quick gotchas about SMIL animations I’ve found while working on Toon Titles. I’m sure there’ll be more as I build my collection.

---

Check out Toon Titles

Or see the source code on Github.

---