Ozark title animation
<svg viewBox="0 0 800 800">
<path id="bg" d="M0 0h800v800H0z" />
<path
id="o-letter"
fill="#e1e1e1"
fill-opacity="1"
stroke-width="5.741"
d="M404.18 129.867A345.179 272.13 0 0059 401.998a345.179 272.13 0 00345.18 272.129 345.179 272.13 0 00345.18-272.129 345.179 272.13 0 00-345.18-272.13zm-.67 29.031a247.13 247.13 0 01247.13 247.13 247.13 247.13 0 01-247.13 247.13 247.13 247.13 0 01-247.13-247.13 247.13 247.13 0 01247.13-247.13z"
opacity="1"
/>
<path
id="vertical-line"
class="line"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-dasharray="none"
stroke-dashoffset="35"
stroke-linecap="round"
stroke-miterlimit="1.2"
stroke-opacity="1"
stroke-width="2"
d="M401.429 196.62l.714 430.713v0"
opacity="1"
/>
<path
id="horizontal-line"
class="line"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-dasharray="none"
stroke-dashoffset="35"
stroke-linecap="round"
stroke-miterlimit="1.2"
stroke-opacity="1"
stroke-width="2"
d="M189.286 411.62l425.833 1.132"
opacity="1"
/>
<g
id="symbol1"
class="symbol"
stroke-dasharray="none"
stroke-dashoffset="35"
stroke-miterlimit="1.2"
>
<path
id="path4759"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-linecap="round"
stroke-opacity=".996"
stroke-width="1"
d="M296.429 259.565c-1.045 2.787.247 5.706.36 8.377 5.225 2.988 6.105 3.48 10.354 3.945 5.363.784 9.867-.95 14.91-2.5 5.65-5.975 5.996-11.404 6.876-19.197-9.288-11.55-17.145-11.492-27.5-8.392-2.607 5.666-3.05 11.858-5 17.767z"
opacity="1"
/>
<path
id="path4761"
fill="#e0e0e0"
fill-opacity="1"
stroke="#e1e1e1"
stroke-linecap="round"
stroke-opacity=".996"
stroke-width="1"
d="M298.753 250.297c3.523-.287 6.972-.82 10.732-.315.712-.647 2.131 5.547 1.01 7.07-.299.408 4.925.885 4.925.885 1.781 1.096 2.138 2.631 2.904 4.04l-2.525 1.39 2.115 5.287 4.108.338c1.731-1.47 6.503-11.244 6.907-18.802-5.39-6.298-10.493-8.77-15.908-9.931-3.897-.028-7.83.905-11.769 1.955z"
opacity="1"
/>
<path
id="path4763"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-linecap="round"
stroke-opacity=".996"
stroke-width="1.7"
d="M305.833 272.171l-8.47 5.842-11.49 6.693-12.248.631-10.228-5.556-5.43-3.41-2.777-6.565-5.809.126-3.535 3.41-2.147 3.535.505 3.914 4.672 3.157h5.304l1.262 3.536 3.41 2.02 5.43 6.06 11.11 5.935 6.314 2.715 14.016-2.336 9.344-3.788 5.808-2.525"
opacity="1"
/>
<path
id="path4765"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-linecap="square"
stroke-opacity=".996"
stroke-width="1.3"
d="M257.968 276.372l11.616-8.713"
opacity="1"
/>
<path
id="path4767"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-linecap="round"
stroke-opacity=".996"
stroke-width="1"
d="M265.699 295.876l-2.849-2.827 1.479-2.827"
opacity="1"
/>
<path
id="path4769"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-linecap="round"
stroke-opacity=".996"
stroke-width="1"
d="M262.23 292.66l-3.378-3.156 1.357-2.589"
opacity="1"
/>
<path
id="path4771"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-linecap="round"
stroke-opacity=".996"
stroke-width="1.7"
d="M322.054 269.387c4.506 2.758 6.972 6.39 9.91 9.821 3.646 11.077 2.989 18.142 1.072 29.107-2.48 8.148-3.084 16.68-4.197 25.09l-.803 3.214"
opacity="1"
/>
<path
id="path4773"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-linecap="round"
stroke-opacity=".996"
stroke-width="1.7"
d="M295.722 301.878l-.276 8.937-2.142 12.5-1.875 6.25 4.285 5"
opacity="1"
/>
<path
id="path4775"
fill="none"
fill-opacity="1"
stroke="#e1e1e1"
stroke-linecap="round"
stroke-opacity=".996"
stroke-width="1.8"
d="M275.393 301.5l6.313 2.714 13.563-1.244"
opacity="1"
/>
<path
id="path4782"
fill="#e1e1e1"
fill-opacity=".995"
stroke="none"
stroke-linecap="round"
stroke-opacity="1"
stroke-width="1"
d="M291.429 329.565l-14.375 31.43-4.822 19.463s8.125 4.732 8.036 5.09c-.09.357 45.982-5.045 45.982-5.045 8.764-8.947 5.506-9.674 16.071-4.509 3.902 5.82 8.007 13.152 12.768 7.054l-6.518-13.304 2.768-.714 9.732 6.071c1.032 5.667 2.091 5.808 7.322 7.054l.625-10.804-12.41-21.16c-4.897-.472-6.031 4.456-8.662 8.035 0 0-5.848-.09-5.49-.09.356 0-2.902-4.106-2.902-4.106-2.403-.588-3.634 2.043-6.429 6.74 0 0-18.214.224-17.768.045 4.758-7.977 12.406-22.265 12.679-24.196-6.782 1.734-13.612 2.868-20.804-.446l-3.84-6.608-2.678 4.822-5 .178z"
opacity="1"
/>
<path
id="path4796"
fill="#e1e1e1"
fill-opacity="1"
stroke="none"
stroke-linecap="square"
stroke-opacity="1"
stroke-width="1"
d="M319.587 285.021s3.74 4.657 3.613 4.215c-.126-.442 2.637 6.013 2.637 6.013l-.82-6.313-3.788-4.735z"
opacity="1"
/>
</g>
<path
id="symbol2"
class="symbol"
fill="#e1e1e1"
d="M492.321 226.798l-.178 23.571-8.214 2.857s-6.965 67.679-6.786 66.964c.178-.714-4.107 61.25-4.107 61.25l11.142.011.108-19.832h8.088l-.053-5.536 15.074-.063.01 5.706 11.188-.002-.022 23.11 10.536.178-.367-5.063 4.296-1.009-16.072-126.071-10.357-4.643-.614-27.066c-.994.337-1.94.808-2.62 2.034l-.694 23.068-5.536.714-3.214-27.679z"
/>
<g
id="symbol3"
class="symbol"
stroke="#e1e1e1"
stroke-dasharray="none"
stroke-dashoffset="35"
stroke-linecap="square"
stroke-miterlimit="1.2"
stroke-opacity=".996"
>
<path
id="path4786"
fill="none"
fill-opacity="1"
stroke-width="3.5"
d="M278.802 497.28c-21.125 17.186-25.663 41.229-27.78 58.904l29.498-.326c-4.305-17.923-5.275-28.48 11.414-35.03"
opacity="1"
/>
<path
id="path4788"
fill="#e0e0e0"
fill-opacity=".988"
stroke-width="1"
d="M371.83 468.47l-7.166 4.2-37.322.053-1.947-3.336-32.24.275-8.544 3.387-11.41-3.278-1.217 3.53 11.364 3.535 2.433 9.113c-3.218 3.661-8.938 7.567-10.892 10.334l17.045 21.213 9.091 8.334h14.268l6.82-9.977 7.576-5.933 3.03-13.26.683-4.158 24.385-.104v-4.386c-2.637-.025-11.063-.113-11.063-.113l.034-2.018c3.516-.05 8.906-.071 12.066 0l12.912-.025zm-69.375 8.434h3.307v1.83l19.504-.066v2.588l-22.787-.16zm-.154 10.01h3.304v1.83l19.506-.066v2.588l-22.789-.16zm-.483 9.727h2.487v1.377l14.672-.05v1.948l-17.141-.12zm14.967 13.966l.358 6.428-4.375 6.274-10.268-.024-1.518-.892-4.107-5.268 2.857-5.447 3.303 1.787 8.75 7.588-3.838-10.178z"
opacity="1"
/>
</g>
<g
id="symbol4"
class="symbol"
fill="#e1e1e1"
fill-opacity="1"
stroke-width="1"
>
<path
id="path4794"
d="M512.944 561.018l2.4 2.146s-5.052 8.46-5.052 9.092c0 .63-9.596.378-9.596.378l-7.45-7.323.758-10.733 1.632-2.13 3.573-.327-1.038 1.952 1.262 5.177 1.39-3.536 2.146-.378v4.419l-.505 6.06 2.399 2.779 2.778.252 3.156-3.156z"
opacity="1"
/>
<path
id="path4798"
d="M529.107 445.012l-16.795 26.136-21.844 4.926-7.197-11.111-8.586-4.168-39.144 12.879 13.222 1.305 3.663 8.707 18.66-5.715 5.625 19.465 4.017 26.607-19.285-19.018-1.16-4.107-2.322-1.875-5.893.178-3.928 3.93.358 3.66 6.517 2.857 7.41 11.16-.177 4.555 7.23 2.32 18.573 18.572 8.857 5.434 7.393-2.041.447-4.197 3.303-1.963 2.322 5.088 5.98-3.57.27-5.805 11.338 1.517 20.357 6.25 4.733 6.52 6.875-1.787-1.073-5.088-6.008-.102-.505-1.01-4.797-3.662-5.178-7.322-26.643-6.945-5.05 4.924.757-8.46-.378-17.046-6.188-10.608-3.662-2.398 11.238-6.313 15.404-11.996 14.522-21.213-8.965-4.292zm6.44 7.828l2.02 1.01s-23.865 26.264-23.74 26.77c.127.504-25.632 8.333-25.632 8.333l-5.809 9.47 2.274-11.616 27.4-8.965zm-75.762 54.17l13.006 13.888 11.238 10.735 3.283 3.408 9.217 1.389 1.389 3.031c-2.4-.253-12.88-2.398-12.88-2.398l-13.89-13.891zm42.68 15.91l2.271 3.408-3.156 11.996z"
opacity="1"
/>
<path
id="path4806"
d="M517.604 519.715l2.857-7.053-2.59-8.929-2.588-4.196-1.072 5.536 2.322 2.5.268 5.803z"
opacity="1"
/>
<path
id="path4808"
d="M426.197 474.839l10.228 8.586 11.301 7.703-3.472-7.324 5.619-1.578-8.018-3.915-6.188.695-7.45-7.197-1.894 1.262z"
opacity="1"
/>
<path
id="path4810"
d="M543.943 454.13l8.081-.946-6.692-5.745 7.829 1.262 5.492 4.04.695-3.598-13.574-6.692s-12.627 3.346-11.68 3.283c.947-.063 9.723 2.904 9.723 2.904l2.715 3.094z"
opacity="1"
/>
</g>
</svg>:root {
--symbol-animation-duration: 1.5s;
--symbol-animation-start: 4s;
}
body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
background-color: black;
}
svg {
width: 80%;
max-width: 800px;
}
#o-letter,
.line,
.symbol {
opacity: 0;
}let tl1 = new TimelineMax();
let symbolRevealDuration = 3;
let symbolRevealOverlap = 2.5;
let symbolEase = "slow(0.7, 0.7, false)";
tl1.set("#vertical-line", {
transformOrigin: "center",
scaleY: 0,
});
tl1.set("#horizontal-line", {
transformOrigin: "center",
scaleX: 0,
});
tl1.to("#o-letter", {
duration: 3,
opacity: 1,
ease: "power1.in",
});
tl1.to(
"#vertical-line",
{
duration: 0.1,
opacity: 1,
},
"-=0.76"
);
tl1.to(
"#vertical-line",
{
duration: 2.5,
ease: "power1.in",
scaleY: 1,
},
"-=0.75"
);
tl1.to(
"#horizontal-line",
{
duration: 0.1,
opacity: 1,
},
"-=2.1"
);
tl1.to(
"#horizontal-line",
{
duration: 2.5,
ease: "power1.in",
scaleX: 1,
},
"-=2"
);
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}`
);
let svg = document.getElementsByTagName("svg")[0];
svg.addEventListener("click", replay);
function replay() {
tl1.restart();
}Description
This is an animation of the title sequence for the television series Ozark.
Implementation Notes
I discuss how I made this in my post, How to create a slick animation from Ozark (TV show title sequence).