A slick animation from Better Call Saul

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 o…


This content originally appeared on DEV Community and was authored by Rob O'Leary

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:

  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.


This content originally appeared on DEV Community and was authored by Rob O'Leary


Print Share Comment Cite Upload Translate Updates
APA

Rob O'Leary | Sciencx (2023-05-15T14:07:28+00:00) A slick animation from Better Call Saul. Retrieved from https://www.scien.cx/2023/05/15/a-slick-animation-from-better-call-saul/

MLA
" » A slick animation from Better Call Saul." Rob O'Leary | Sciencx - Monday May 15, 2023, https://www.scien.cx/2023/05/15/a-slick-animation-from-better-call-saul/
HARVARD
Rob O'Leary | Sciencx Monday May 15, 2023 » A slick animation from Better Call Saul., viewed ,<https://www.scien.cx/2023/05/15/a-slick-animation-from-better-call-saul/>
VANCOUVER
Rob O'Leary | Sciencx - » A slick animation from Better Call Saul. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/15/a-slick-animation-from-better-call-saul/
CHICAGO
" » A slick animation from Better Call Saul." Rob O'Leary | Sciencx - Accessed . https://www.scien.cx/2023/05/15/a-slick-animation-from-better-call-saul/
IEEE
" » A slick animation from Better Call Saul." Rob O'Leary | Sciencx [Online]. Available: https://www.scien.cx/2023/05/15/a-slick-animation-from-better-call-saul/. [Accessed: ]
rf:citation
» A slick animation from Better Call Saul | Rob O'Leary | Sciencx | https://www.scien.cx/2023/05/15/a-slick-animation-from-better-call-saul/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts