Rob O'Leary

TV & movie title sequences as web animations (11)

In this series, I will recreate some title sequences from popular television series and movies as web animations. Any moment in the opening or ending credits that grabs my attention I will create as a web animation.

I will explore making the animation in CSS and JavaScript to compare approaches. I hope to expand my animation chops and discover new techniques along the way.

  1. The title card for the movie The Fall Guy. The title text is in a bold, yellow serif font. The letter 'A' has the counter (open area) filled in. In its place is a silhouette of a falling man.

    How to create a slick CSS animation from The Fall Guy

    The title sequence for The Fall Guy involves an animation of a man falling - a very literal depiction of the title! Let’s see how we can make it with CSS.

  2. A frame from the title sequence of the movie Alien. It shows a distant planet with a brackish eclipse. Some disjointed bits of letters are overlaid along the top of the frame.

    How to create a slick CSS animation from Alien

    The title sequence for Alien is iconic. It sets the mood of the movie perfectly. Let’s see how we can recreate it as a web animation!

  3. My recreation of the title card of the movie Cocktail. It is a glowing neon bar sign. It has the word 'Cocktail' in bright blue with a pink circle in the rear.

    How to create a slick CSS animation from Cocktail

    Let’s jump to the 80’s and create an animation with a retro feel. Cocktail!

  4. The title card of the movie Jackie Brown. The words 'Jackie Brown' are set in a 1970s stylized font. The fill color of the text is yellow with a thick brown drop shadow emphasizing the character shapes. In the background is an airport scene with the central character. Jackie standing on a travelator (moving walkway) with a mosiac tile wall passing behind her.

    How to create a slick CSS animation from Jackie Brown

    The title sequence for Jackie Brown is simple but has some 70’s flair. Let’s recreate the reveal animation of the title card.

  5. An annotated depiciton of the title of the TV series Stranger Things. The notes point out various instances where the typeface was manipulated. Examples such as kerning to connect the letters: r, a, and n. The leading letters of the words are enlarged.

    How to create a slick animation from Stranger Things

    Stranger Things might be the most dissected and celebrated title sequence around! Let’s break it down and see if we can emulate it as a web animation.

  6. The title card for the tv series Better Call Saul. In the background is an inflatable lady liberity. The title is written in a sketchy cursive fot with a strong offset black shadow. A feathery sketch of a balancing scales is beside the title.

    A slick animation from Better Call Saul

    This time, I will make the title sequence from Better Call Saul. It looks like a poorly produced, cheesy commercial from the noughties.

  7. The Schitts Creek title card is illuminated with a dazzling light. The font used for the title is a serif font. The last s in the first word is modified to look like a dollar sign.

    How to create a slick animation from Schitt’s Creek

    This time, I will make the title sequence from Schitt’s Creek. It has a quirky, irreverent quality to it.

  8. An exploded view of the animation for the TV Series Upload. It shows layers from back to front: background image of a lake, glitches, a beam, knocked out text, stroked text, and a reveal layer.

    How to make a slick CSS animation from Upload

    This time, I will tackle a title sequence from Upload. It has a cool chugging, progress bar reveal of the title.

  9. The title card for The Marvelous Mrs Maisel in the midst of animation. The animation is like a curtain being pulled across. The effect changes the background color and the text color as it shifts from right to left.

    How to create a slick CSS animation from The Marvelous Mrs Maisel

    This time, I will animate a title sequence from The Marvelous Mrs. Maisel from Episode 2 of Season 4. It has a cool kind of curtain swipe affect.

  10. The ozark title card has an iconic design. Inside the letter,it is divided into quadrats, each containing a symbol that represents the remaining 4 letters of the title. The first symbol is a man handcuffed begging, the second is a strange A-shaped object, the third is a pistol, and the fourth is a dead person sprawled out like a starfish.

    How to create a slick animation from Ozark

    Today I will create the title sequence from Ozark as a web animation using the Greensock (GSAP) JavaScript library.