DEV Community

Cover image for How to create a slick CSS animation from Jackie Brown
Rob OLeary
Rob OLeary

Posted on • Updated on • Originally published at roboleary.net

How to create a slick CSS animation from Jackie Brown

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:

  1. 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.
  2. 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;
}
Enter fullscreen mode Exit fullscreen mode

A div with a linear gradient as a background image. It is 30% transparent and 70% black

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%);
}
Enter fullscreen mode Exit fullscreen mode

The title uses the linear gradient as a mask. The initial 30% of the title is hidden.

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.

Demonstrating the intial position and movement of mask. The transparent portion of the gradient is positioned over the title initially to hide it. It is moved through the mask-position property

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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

I had to add some inline padding to the title to ensure that the mask did not truncate the edges of the title.

.title{
    padding: 0 1%;
}
Enter fullscreen mode Exit fullscreen mode

Written by Rob O'Leary

Subscribe to RSS feed for the latest articles.

Top comments (1)

Collapse
 
codevsom profile image
Somnath Pan

❤️❤️❤️❤️