Rob O'Leary

A slick animation from Better Call Saul

2 min read

This time, I will recreate the title sequence from Better Call Saul as a web animation.

Better Call Saul is an American crime drama television series. It is a spin-off, prequel, and a sequel to Breaking Bad. Set primarily in the early to middle part of the 2000s in Albuquerque, New Mexico, the series follows Jimmy McGill (Bob Odenkirk), an earnest lawyer and former con artist, as he becomes an egocentric criminal defense attorney known as Saul Goodman.

I will not be giving an in-depth walk-through like previous posts in this series. I will leave it up to you to explore the code yourself.

The title sequence

The title sequence is made to look like a poorly produced, cheesy commercial. It appears like the playback of VHS video cassette that has some tracking issues. There are noisy artifacts and some shuddering of the title.

At the beginning, the scene is blurry and comes into focus. You see a close-up of an inflatable lady liberity statue girating slowly. The title is overlayed for a few seconds. Then there is a quick flash of a colour card, and then a diamond wipe transition to introduce the credits for the creators of the show. The names in the credits blink on and off like an arcade game’s credits a few times.

Each season has a different title sequence. Here is a video clip of the title sequence from season 1 that I will reproduce:

The web animation

I used the Greensock (GSAP) library for the animation.

Design notes

Three typefaces are used for the title of the TV series:

  1. The text “Better Call” uses Script1 Script Casual in italics.
  2. The text “Saul” uses a cursive font that is very similar to Dancing Script.
  3. The credits use VCR OSD Mono.

Optimizing animation

The animation could be optimized further. The following could be done:

  1. At the beginning of the animation, the title is blurry and comes into focus. This is done by animating filter:blur(). It would probably be more performant to overlay a blurry version of the background, and animate the opacity on that instead.
  2. There is a separate animation timeline that moves a duplicate of the background image (Lady Liberity) to create some subtle movement. It may be more performant to turn this into an aimated image. This tradeoff may not be worth making.

Source code

The source code is available in this github repo.

You can check out all out of the examples of this in this codepen collection.

Tagged