Rob OLeary

Posted on Jan 22, 2022 • Edited on May 31, 2023 • Originally published at roboleary.net

How to create a slick animation from Ozark

#webdev #javascript

To mark the occasion of the TV show Ozark releasing its fourth season, I created the title sequence as a web animation. If you are not familar, Ozark is an American crime drama on Netflix. The series follows Marty and Wendy Byrde, a married couple who move their family to the Lake of the Ozarks to create a big money laundering operation for a Mexican drug cartel.

For some viewers, a show's title sequence is nothing more than a minute long segment to be skipped past, or used as an opportunity to squeeze in a quick activity before the show starts, but they are missing out in the case of Ozark. The show is known for its dynamic plot and stark imagery, and if you pay close attention to the show's brief title sequence, you can appreciate how it complements the tone of the show.

It can be interesting to see how the internet dissects these kind of things. The first part of the title sequence is extremely simple: It's just the word "Ozark" in a regular font, a font so bland it led to Redditors to question the motives behind the choice. In a thread entitled "Does the Ozark opening sequence font bother anyone else," user Suspicious_Earth asked the question, "Considering that Ozark is an incredibly well-made show with exceptionally great acting, writing, world-building, and directing...does the fact that the opening title credits use the MOST basic and generic font bother anyone else?" 😀

The font choice is not something that would bother me!

The bit I like is the second part of the sequence, which introduces a large circle with 4 symbols that form inside. Upon first watch, you may think that the symbols that pop up in the middle of the circle are arbitrary, but after watching the episode, you can tie the symbols you see to themes, images, and plot devices of that episode. Some are straightforward and depict something the viewer will literally see later on, while others require some creative thinking to work out.

Here is my animation of Season 1 Episode 1's title card. You can click on it to replay if you missed it.

There is something else about the symbols that you may not have realized. The symbols form the outline of letters, which spell out the name of the show! The big circle is the letter O and inside you have Z A R K! And I recerntly discovered, but I haven't tried, that if you turn on audio subtitles while watching the title sequence on Netflix, it tells you exactly what the symbols are!

If you want to see an image of the title cards for each episode for the first 2 seasons, along with a plot summary, you can check out this article, Here’s What The Symbols in ‘Ozark’s Hypnotizing Opening Credits Mean .

Ok, enough chatter, let's look at how to make the animation.

The code

I used Greensock (GSAP) for the animation. You could pull it off with CSS too, but I chose GSAP because I wanted an excuse to play with it.

I drew the image for Season 1, Episode 1 title card as a SVG in Inkscape. When I was happy with its appearance, I inspected the SVG code and removed any transform styles applied to elements. It can mess up animations when multiple transforms are applied to the same element.

In theory the animation is quite simple, you are mostly just fading in the elements at different times, and at different rates.

The outline of the sequence of events is:

Fade in the circle slowly,
Begin extending the vertical line,
Followed quickly by extending the horizontal line,
After the lines are approxmiately 50% of their complete length, fade in the first symbol,
When the first symbol has reached about 20% opacity, fade in the second symbol, and follow the same pattern with the next 2 symbols.

It takes some trial and error to find the right duration and eases for each part. GSAP has an ease visulizer that is helpful to narrow the search down.

We will animate the opacity property of the circle and symbols, and we will animate transform:scale() property for the lines. Specifically, we animate transform: scaleY() for the vertical line to expand up, and transform: scaleX() for the horiztonal line to expand across.

This is not intended to be a tutorial on GSAP, you can jump into the Getting Start with GSAP guide if you are newcomer. However, there are a few bits I will point out that may help you when using GSAP for similar type of animations.

In CSS, we set the opacity to zero for all our elements. We want to start with a blank screen!

#o-letter,
.line,
.symbol {
  opacity: 0;
}

For the lines, we set the initial properties in JavaScript that we want to animate, this ensures you get the most accurate result. In the past, I set these properties in CSS and it can led to erratic results sometimes. This is what they recommend. GSAP has individual properties for the transform functions e.g. scaleX for transform: scaleX().

tl1.set("#vertical-line", {
  transformOrigin: "center",
  scaleY: 0,
});

tl1.set("#horizontal-line", {
  transformOrigin: "center",
  scaleX: 0,
});

We are create a timeline and use the to() function to perform the individual animations. I will just focus on the animation of the symbols here as they are the most complicated.

It is helpful to extract out common values as variables, I found it a bit tricky to get the duration, ease, and the overlapping of the animations the way I wanted. So having variables for this is the way to make adjustments simpler.

let tl1 = new TimelineMax();
let symbolRevealDuration = 3;
let symbolRevealOverlap = 2.5;
let symbolEase = "slow(0.7, 0.7, false)";

// other stuff for animating circle and lines

// symbols
tl1.to(
  "#symbol1",
  {
    duration: symbolRevealDuration,
    ease: symbolEase,
    opacity: 1,
  },
  `-=1.25`
);

tl1.to(
  "#symbol2",
  {
    duration: symbolRevealDuration,
    ease: symbolEase,
    opacity: 1,
  },
  `-=${symbolRevealOverlap}`
);

tl1.to(
  "#symbol3",
  {
    duration: symbolRevealDuration,
    ease: symbolEase,
    opacity: 1,
  },
  `-=${symbolRevealOverlap}`
);

tl1.to(
  "#symbol4",
  {
    duration: symbolRevealDuration,
    ease: symbolEase,
    opacity: 1,
  },
  `-=${symbolRevealOverlap}`
);

You can see with the to() function the third parameter is the position:

position: [ Number | String ]

(default = "+=0") — controls the insertion point in the timeline (by default, it’s the end of the timeline).

By default, animations are added to the end of the timeline, so that everything is sequenced one-after-the-other. We can use the position parameter to overlap the revealing of the symbols. For example, for #symbol1 we supply "-=1.25", which will begin the animation 1.25 seconds before the end of the timeline. This is what I hit upon that worked the way I wanted.

You could also use "<+=1" for the position parameter to start an animation 1 second after the start of the previous animation. This is probably a more intuitive way to do it, to give others a better chance of understanding the code quickly. Since, I discovered this notation later, I didn't feel like returning to change it (sorry)! These are some of the lessons you learn along the way!