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.
Give it ❤️❤️❤️ on Codepen if you like it! 😊
Source code: https://github.com/robole/title-sequences.
Design notes
Three typefaces are used for the title of the TV series:
- The text “Better Call” uses Script1 Script Casual in italics.
- The text “Saul” uses a cursive font that is very similar to Dancing Script.
- The credits use VCR OSD Mono.
Top comments (0)