Create Ozark's title animation with Greensock (GSAP)

To mark the occasion of the TV show Ozark releasing its fourth season, I created the title sequence as a web animation. 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?"

I won't go there. The bit I like is the second part of the sequence, which introduces a large circle with 4 symbols forming inside. Upon first watch, the symbols that pop up in the middle of the circle may seem 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, Heres What The Symbols in Ozarks 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:

1. Fade in the circle slowly,
2. Begin extending the vertical line,
3. Followed quickly by extending the horizontal line,
4. After the lines are approxmiately 50% of their complete length, fade in the first symbol,
5. 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 of the circle and symbols, and we will animate transform:scale for the lines. We animate scaleY for the vertical line, and scaleX for the horizontal line.

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.

#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.

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// symbolstl1.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, its 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 past the start of the previous animation. This is probably simpler to understand as sequence of animations. Since, I discovered this notation late, I didn't feel like redoing it (sorry)! These are some of the lessons you learn along the way!

I put the code on GitHub along with some other title sequences, if you want to grab it: https://github.com/robole/title-sequences.

That's it. I hope you enjoyed this short whistle tour. If you a fan of the show, enjoy the new season!