How to create a slick CSS animation from Jackie Brown

#webdev #css #animation

Jackie Brown is an American crime film that pays homage to 1970s blaxploitation films. The title sequence is simple but has some 70's flair. Let's recreate the reveal animation of the title card.

TLDR

Here is the finished animation.

About the title sequence

The opening title sequence for Jackie Brown is an introductory scene with the titles overlaid. It introduces us to the titular character while she is making her through an airport to board a flight. It is quite hypnotic seeing Jackie standing on a travelator (moving walkway) with a mosiac tile wall passing in the background. The framing and placement of the titles is very well done.

Here is a short excerpt of the title sequence where the title of the movie is revealed:

You can view the full sequence at: https://www.youtube.com/watch?v=ivKGY-zAa1g.

The original font is probably ITC Tiffany Heavy. This has a commerical license, so I have not used it here. I used a free alternative called VI Vong Vang. It has similarities but is missing some of the elongated serifs and some glyphs are more condensed. It is good enough to fufil my brief. You can appreciate the differences in the figure 1.0 below.

Comparsion of the original typeface used (top) with VI Vong Vang (bottom). VI Vong Vang is missing some of the elongated serifs and flourishes. — Figure 1.0 - Comparsion of the original font used (top) with VI Vong Vang (bottom). VI Vong Vang is missing some of the elongated serifs and some glyphs are more condensed.

This is a good example of why you would pay for a typeface!

The reveal animation

There are a couple of considerations for the reveal animation:

The reveal animation has a slightly tapered end to create a vintage film feel. We want to have some partial transparency in the animation to give this impression.
It has thick shadows, so we need to ensure that these are not truncated by the animation. We need to compensate for that space.

The effect can be created by a mask as it allows partial transparency. We can use a linear gradient as the mask image to show a portion of the title at a time. The portion of the title we want to show, we use black in that portion of the gradient. The portion we want hidden, we have as transparent in the gradient.

For example, this linear gradient is 30% transparent and 70% black.

div {
    background-image: linear-gradient(to right, 
    transparent 0% 30%, 
    black 30% 100%);

    border: 2px dotted white;
}

If we apply the same gradient as a mask to the title with the mask-image, the initial 30% of the title is hidden.

.title{
    mask-image: linear-gradient(to right, 
    transparent 0% 30%, 
    black 30% 100%);
}

To animate it, we want to move the mask across the title using mask-position.

I found the easiest approach was to create a mask that is twice the width of the title. I made one half of the gradient transparent to completely hide the title, and the other half as mostly black to show the title. The intial position of the mask is to place the transparent half over the title.

This is the key CSS:

.title {
    mask-image: linear-gradient(
    to right,
    black 0% 50%,
    rgb(0 0 0 / 10%) 50%,
    transparent 51%,
    rgb(0 0 0 / 30%) 51.5%,
    transparent 51.5% 100%
  );
  mask-position: 100%;
  mask-size: 200% 100%;

  animation: reveal 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes reveal {
  100% {
    mask-position: 0%;
  }
}