<h1>Why Jamstack?</h1>
<main>
  <div>
    <p class="p1">Problem: With a traditional client-side rendering solution, the server delivers a file without content until you fetch everything and the browser compiles it. And if you're far away from that server, the latency for the request gets larger.</p>
  </div>
  <div class="hidden p2">
    <p>With older server-side rendering solutions, the server compiles and fetches everything, builds the web page, and delivers a fully populated HTML page. It's much faster.</p>
  </div>
  <div class="hidden p3">
    <p>However each time you navigate to a new route, the server has to do it all again- compile and fetch it all, and deliver it. This process delays the load, sometimes by whole seconds.</p>
  </div>
  <div class="hidden p4">
    <p>Recently, an approach called Jamstack has become popular, which addresses both issues. The whole site is built before deploying the content to CDNs, which means itโ€™s geo-replicated across the globe. We never go back to a server on additional requests.</p>
  </div>
  <div class="hidden p5">
    <p>We call it Jamstack and not static, because it extends beyond static. We can make the page dynamic, with API calls or serverless functions, and the user can interact with it.</p>
  </div>
  <div class="hidden p6">
    <p>What's more, because there's no server involved, there are fewer attack vectors. Jamstack approaches improve performance and security! ๐ŸŽ‰</p>
  </div>
</main>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 351 197">
  <image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/jamstack-globe.jpg" width="100%" height="100%" />
  <path stroke="#000" fill="none" stroke-width="2" stroke-miterlimit="10" d="M0.5 0.5H350.5V196.5H0.5z" />
  <g id="globe-lines-server" opacity=".51">
    <path class="cls-3 forwards" d="M40.1,154.9S56,21.4,167.4,94" transform="translate(.5 .5)" />
    <path class="cls-3 backwards" d="M167.4,94c36.1-70.7,66.1,9.3,66.1,9.3" transform="translate(.5 .5)" />
    <path class="cls-3 backwards" d="M167.4,94c-50.6-90.6-88.7,20.5-88.7,20.5" transform="translate(.5 .5)" />
    <path class="cls-3 backwards" d="M167.4,94c24.3-92.8,80.4,5.2,80.4,5.2" transform="translate(.5 .5)" />
    <path class="cls-3 forwards" d="M190.7,118.4S170.7,2.5,167.4,94" transform="translate(.5 .5)" />
    <path class="cls-3 forwards" d="M279,119.6s-82.5-137-111.3-26.2" transform="translate(.5 .5)" />
    <path class="cls-3 forwards" d="M95.2,133.1S162.9-5.9,167.4,94" transform="translate(.5 .5)" />
    <path class="cls-3 forwards" d="M137.6,137s30-154.5,29.8-43" transform="translate(.5 .5)" />
    <path class="cls-3 forwards" d="M238.6,161.9S181.4-40.4,167.4,93.5" transform="translate(.5 .5)" />
    <path class="cls-3 backwards" d="M167.4,93.5c-6.7-120.2-104,24.4-104,24.4" transform="translate(.5 .5)" />
  </g>
  <g id="file-content" class="cls-4">
    <path class="cls-5" d="M160.5 10.4H170.7V11.25H160.5z" />
    <path class="cls-5" d="M177.5 10.4H180.9V11.25H177.5z" />
    <path class="cls-5" d="M160.5 12.3H174.1V12.72H160.5z" />
    <path class="cls-5" d="M160.5 15.7H170.7V16.12H160.5z" />
    <path class="cls-5" d="M160.5 17.4H170.7V17.82H160.5z" />
    <path class="cls-5" d="M160.5 34.4H180.8V34.82H160.5z" />
    <path class="cls-5" d="M160.5 36.1H180.8V36.52H160.5z" />
    <path class="cls-5" d="M160.5 37.8H170.7V38.22H160.5z" />
    <path class="cls-5" d="M160.5 19.1H167.3V19.520000000000003H160.5z" />
    <path class="cls-5" d="M160.5 24.2H167.3V24.62H160.5z" />
    <path class="cls-5" d="M160.5 20.8H169V21.220000000000002H160.5z" />
    <path class="cls-5" d="M160.5 22.5H169V22.92H160.5z" />
    <path class="cls-5" d="M171.9,25.6h8.5V15.4h-8.5Zm.4-9.7h7.6v9.3h-7.6Z" transform="translate(.5 .5)" />
    <path class="cls-5" d="M180.4,27.3H160v3.4h20.4Zm-.5,3H160.4V27.7h19.5Z" transform="translate(.5 .5)" />
  </g>
  <g id="file-outside">
    <path class="cls-6"
      d="M183.3,5.3H157a.4.4,0,0,0-.4.4V42.1a.5.5,0,0,0,.4.5h26.3c.3,0,.4-.2.4-.5V5.7A.4.4,0,0,0,183.3,5.3Zm-.4,36.4H157.5V6.1h25.4Z"
      transform="translate(.5 .5)" />
    <path class="cls-7" d="M157.1 6.2H184V43H157.1z" />
  </g>
  <g id="file-outside2">
    <path class="cls-6"
      d="M183.3,5.3H157a.4.4,0,0,0-.4.4V42.1a.5.5,0,0,0,.4.5h26.3c.3,0,.4-.2.4-.5V5.7A.4.4,0,0,0,183.3,5.3Zm-.4,36.4H157.5V6.1h25.4Z"
      transform="translate(.5 .5)" />
    <path class="cls-7" d="M157.1 6.2H184V43H157.1z" />
  </g>
  <g id="loader" opacity=".62">
    <path class="cls-5" d="M171.6,18a1.7,1.7,0,0,1-1.7,1.7,1.7,1.7,0,0,1,0-3.4A1.7,1.7,0,0,1,171.6,18Z"
      transform="translate(.5 .5)" />
    <path class="cls-5"
      d="M165.5,23.7a1.5,1.5,0,0,1-1.5,1.6,1.6,1.6,0,0,1-1.5-1.6,1.5,1.5,0,0,1,1.5-1.5A1.5,1.5,0,0,1,165.5,23.7Z"
      transform="translate(.5 .5)" />
    <path class="cls-5" d="M166.7,27.3a1.5,1.5,0,0,1-1.5,1.5,1.5,1.5,0,0,1,0-3A1.5,1.5,0,0,1,166.7,27.3Z"
      transform="translate(.5 .5)" />
    <path class="cls-5"
      d="M169.2,29.5a1.3,1.3,0,0,1-1.4,1.3,1.3,1.3,0,0,1-1.3-1.3,1.3,1.3,0,0,1,1.3-1.4A1.4,1.4,0,0,1,169.2,29.5Z"
      transform="translate(.5 .5)" />
    <path class="cls-5"
      d="M173.3,29.5a1.3,1.3,0,0,1-1.3,1.3,1.3,1.3,0,0,1-1.4-1.3,1.4,1.4,0,0,1,1.4-1.4A1.3,1.3,0,0,1,173.3,29.5Z"
      transform="translate(.5 .5)" />
    <path class="cls-5"
      d="M176.3,27.1a1.1,1.1,0,0,1-1.1,1.2,1.2,1.2,0,0,1-1.2-1.2,1.2,1.2,0,0,1,1.2-1.2A1.2,1.2,0,0,1,176.3,27.1Z"
      transform="translate(.5 .5)" />
    <path class="cls-5"
      d="M177.4,23.9a1.2,1.2,0,0,1-1.2,1.2,1.2,1.2,0,0,1-1.2-1.2,1.2,1.2,0,0,1,1.2-1.2A1.3,1.3,0,0,1,177.4,23.9Z"
      transform="translate(.5 .5)" />
    <path class="cls-5" d="M174.8,18.5a.8.8,0,0,1-.8.9.9.9,0,0,1-.9-.9.8.8,0,0,1,.9-.8A.7.7,0,0,1,174.8,18.5Z"
      transform="translate(.5 .5)" />
    <path class="cls-5"
      d="M167.4,19.9a1.6,1.6,0,0,1-1.7,1.6,1.7,1.7,0,0,1-1.7-1.6,1.7,1.7,0,0,1,1.7-1.7A1.6,1.6,0,0,1,167.4,19.9Z"
      transform="translate(.5 .5)" />
    <path class="cls-5" d="M176.7,20.9a1.1,1.1,0,0,1-1,1,1,1,0,0,1-1-1,.9.9,0,0,1,1-1A1,1,0,0,1,176.7,20.9Z"
      transform="translate(.5 .5)" />
  </g>
  <g id="newfiles">
    <g id="fullpage1">
      <g id="file-content-2" data-name="file-content" class="cls-4">
        <path class="cls-5" d="M43.6 46.1H53.8V46.95H43.6z" />
        <path class="cls-5" d="M60.6 46.1H64V46.95H60.6z" />
        <path class="cls-5" d="M43.6 48H57.2V48.42H43.6z" />
        <path class="cls-5" d="M43.6 51.4H53.8V51.82H43.6z" />
        <path class="cls-5" d="M43.6 53.1H53.8V53.52H43.6z" />
        <path class="cls-5" d="M43.6 70H63.900000000000006V70.42H43.6z" />
        <path class="cls-5" d="M43.6 71.7H63.900000000000006V72.12H43.6z" />
        <path class="cls-5" d="M43.6 73.4H53.8V73.82000000000001H43.6z" />
        <path class="cls-5" d="M43.6 54.8H50.4V55.22H43.6z" />
        <path class="cls-5" d="M43.6 59.9H50.4V60.32H43.6z" />
        <path class="cls-5" d="M43.6 56.5H52.1V56.92H43.6z" />
        <path class="cls-5" d="M43.6 58.2H52.1V58.620000000000005H43.6z" />
        <path class="cls-5" d="M55,61.3h8.5V51.1H55Zm.4-9.8H63v9.3H55.4Z" transform="translate(.5 .5)" />
        <path class="cls-5" d="M63.5,63H43.1v3.3H63.5ZM63,65.9H43.5V63.4H63Z" transform="translate(.5 .5)" />
      </g>
      <g id="file-outside-2" data-name="file-outside">
        <path class="cls-6"
          d="M66.4,40.9H40.2a.5.5,0,0,0-.5.4V77.8a.5.5,0,0,0,.5.4H66.4a.5.5,0,0,0,.5-.4V41.3A.5.5,0,0,0,66.4,40.9ZM66,77.4H40.6V41.8H66Z"
          transform="translate(.5 .5)" />
        <path class="cls-7" d="M40.2 41.8H67.1V78.6H40.2z" />
      </g>
    </g>
    <g id="fullpage2">
      <g id="file-content-3" data-name="file-content" class="cls-4">
        <path class="cls-5" d="M99.5 20.6H109.7V21.450000000000003H99.5z" />
        <path class="cls-5" d="M116.4 20.6H119.80000000000001V21.450000000000003H116.4z" />
        <path class="cls-5" d="M99.5 22.5H113.1V22.92H99.5z" />
        <path class="cls-5" d="M99.5 25.9H109.7V26.32H99.5z" />
        <path class="cls-5" d="M99.5 27.6H109.7V28.020000000000003H99.5z" />
        <path class="cls-5" d="M99.5 44.6H119.8V45.02H99.5z" />
        <path class="cls-5" d="M99.5 46.3H119.8V46.72H99.5z" />
        <path class="cls-5" d="M99.5 48H109.7V48.42H99.5z" />
        <path class="cls-5" d="M99.5 29.3H106.3V29.720000000000002H99.5z" />
        <path class="cls-5" d="M99.5 34.4H106.3V34.82H99.5z" />
        <path class="cls-5" d="M99.5 31H108V31.42H99.5z" />
        <path class="cls-5" d="M99.5 32.7H108V33.120000000000005H99.5z" />
        <path class="cls-5" d="M110.8,35.8h8.5V25.6h-8.5Zm.5-9.7h7.6v9.3h-7.6Z" transform="translate(.5 .5)" />
        <path class="cls-5" d="M119.3,37.5H99v3.4h20.3Zm-.4,3H99.4V37.9h19.5Z" transform="translate(.5 .5)" />
      </g>
      <g id="file-outside-3" data-name="file-outside">
        <path class="cls-6"
          d="M122.3,15.5H96a.4.4,0,0,0-.4.4V52.3a.5.5,0,0,0,.4.5h26.3a.5.5,0,0,0,.4-.5V15.9A.4.4,0,0,0,122.3,15.5Zm-.4,36.4H96.4V16.3h25.5Z"
          transform="translate(.5 .5)" />
        <path class="cls-7" d="M96.1 16.4H123V53.199999999999996H96.1z" />
      </g>
    </g>
    <g id="fullpage3">
      <g id="file-content-4" data-name="file-content" class="cls-4">
        <path class="cls-5" d="M220.7 16.3H230.89999999999998V17.150000000000002H220.7z" />
        <path class="cls-5" d="M237.7 16.3H241.1V17.150000000000002H237.7z" />
        <path class="cls-5" d="M220.7 18.2H234.29999999999998V18.62H220.7z" />
        <path class="cls-5" d="M220.7 21.6H230.89999999999998V22.020000000000003H220.7z" />
        <path class="cls-5" d="M220.7 23.3H230.89999999999998V23.720000000000002H220.7z" />
        <path class="cls-5" d="M220.7 40.3H241V40.72H220.7z" />
        <path class="cls-5" d="M220.7 41.9H241V42.32H220.7z" />
        <path class="cls-5" d="M220.7 43.6H230.89999999999998V44.02H220.7z" />
        <path class="cls-5" d="M220.7 25H227.5V25.42H220.7z" />
        <path class="cls-5" d="M220.7 30.1H227.5V30.520000000000003H220.7z" />
        <path class="cls-5" d="M220.7 26.7H229.2V27.12H220.7z" />
        <path class="cls-5" d="M220.7 28.4H229.2V28.82H220.7z" />
        <path class="cls-5" d="M232.1,31.5h8.5V21.3h-8.5Zm.4-9.8h7.6v9.4h-7.6Z" transform="translate(.5 .5)" />
        <path class="cls-5" d="M240.6,33.2H220.2v3.4h20.4Zm-.5,2.9H220.6V33.6h19.5Z" transform="translate(.5 .5)" />
      </g>
      <g id="file-outside-4" data-name="file-outside">
        <path class="cls-6"
          d="M243.5,11.1H217.2a.5.5,0,0,0-.4.5V48a.4.4,0,0,0,.4.4h26.3c.3,0,.4-.1.4-.4V11.6C243.9,11.3,243.8,11.1,243.5,11.1Zm-.4,36.5H217.7V12h25.4Z"
          transform="translate(.5 .5)" />
        <path class="cls-7" d="M217.3 12.1H244.20000000000002V48.9H217.3z" />
      </g>
    </g>
    <g id="fullpage4">
      <g id="file-content-5" data-name="file-content" class="cls-4">
        <path class="cls-5" d="M273.3 32.8H283.5V33.65H273.3z" />
        <path class="cls-5" d="M290.2 32.8H293.59999999999997V33.65H290.2z" />
        <path class="cls-5" d="M273.3 34.7H286.90000000000003V35.120000000000005H273.3z" />
        <path class="cls-5" d="M273.3 38.1H283.5V38.52H273.3z" />
        <path class="cls-5" d="M273.3 39.8H283.5V40.22H273.3z" />
        <path class="cls-5" d="M273.3 56.7H293.6V57.120000000000005H273.3z" />
        <path class="cls-5" d="M273.3 58.4H293.6V58.82H273.3z" />
        <path class="cls-5" d="M273.3 60.1H283.5V60.52H273.3z" />
        <path class="cls-5" d="M273.3 41.5H280.1V41.92H273.3z" />
        <path class="cls-5" d="M273.3 46.6H280.1V47.02H273.3z" />
        <path class="cls-5" d="M273.3 43.2H281.8V43.620000000000005H273.3z" />
        <path class="cls-5" d="M273.3 44.9H281.8V45.32H273.3z" />
        <path class="cls-5" d="M284.7,48h8.4V37.8h-8.4Zm.4-9.8h7.6v9.4h-7.6Z" transform="translate(.5 .5)" />
        <path class="cls-5" d="M293.1,49.7H272.8v3.4h20.3Zm-.4,2.9H273.2V50.1h19.5Z" transform="translate(.5 .5)" />
      </g>
      <g id="file-outside-5" data-name="file-outside">
        <path class="cls-6"
          d="M296.1,27.6H269.8a.5.5,0,0,0-.4.5V64.5a.4.4,0,0,0,.4.4h26.3a.4.4,0,0,0,.4-.4V28.1A.5.5,0,0,0,296.1,27.6Zm-.4,36.5H270.3V28.5h25.4Z"
          transform="translate(.5 .5)" />
        <path class="cls-7" d="M269.9 28.6H296.79999999999995V65.4H269.9z" />
      </g>
    </g>
  </g>
  <g id="cdn-lines">
    <path class="cls-259" d="M139.4,91.4" transform="translate(0)" />
    <path class="cls-259" d="M189.4,120.6S175,20.4,171.2,98.4" transform="translate(0)" />
    <path class="cls-259" d="M161.6,115c4.6-34.1,8.3-65.9,9.6-16.6" transform="translate(0)" />
    <path class="cls-259" d="M211,107.7s15-56.1,22.6-4.4" transform="translate(0)" />
    <path class="cls-259" d="M263.2,120.6s11.3-50.2,15.8-1" transform="translate(0)" />
    <path class="cls-259" d="M241.5,161.9S273.2,59.2,279,120" transform="translate(0)" />
    <path class="cls-259" d="M287.9,125.8s-4.6-42.5-8.9-6.2" transform="translate(0)" />
    <path class="cls-259" d="M187.2,86.5s-17.3-53.9-16.4,11.2" transform="translate(0)" />
    <path class="cls-259" d="M222.5,116s9.7-47.5,11-12.7" transform="translate(0)" />
    <path class="cls-259" d="M44.2,144.8S54,56.4,64.4,122.3" transform="translate(0)" />
    <path class="cls-259" d="M84.6,126.9s-17.1-66.3-20-6.2" transform="translate(0)" />
    <path class="cls-259" d="M73.8,130.9s-9.7-40.1-9.2-5.9" transform="translate(0)" />
    <path class="cls-259" d="M114.2,86.5c3.1-82.9,18.4,49.7,18.4,49.7" transform="translate(0)" />
    <path class="cls-259" d="M131.8,82.6s-10.3-60.8-17.5,3.1" transform="translate(0)" />
    <path class="cls-259" d="M94.9,107.5s16-85.7,19.3-21" transform="translate(0)" />
    <path class="cls-259" d="M249.3,113.6s-7.4-66.7-15.8-9.5" transform="translate(0)" />
  </g>
  <g id="locks"><path class="cls-20" d="M168.1,20.5h4.5V18.9a2.2,2.2,0,0,0-2.3-2.2,2.2,2.2,0,0,0-2.2,2.2Zm5.7.1a1.6,1.6,0,0,1,1.4,1.6v5.3a1.6,1.6,0,0,1-1.6,1.6h-6.5a1.6,1.6,0,0,1-1.6-1.6V22.2a1.6,1.6,0,0,1,1.4-1.6V18.9a3.5,3.5,0,1,1,6.9,0Zm-3.5,2.8a.9.9,0,0,1,1,.9,1,1,0,0,1-.5.8v.8a.5.5,0,0,1-.5.4.4.4,0,0,1-.4-.4v-.8a1,1,0,0,1-.5-.8A.9.9,0,0,1,170.3,23.4Z" transform="translate(0.5 0.5)"/><path class="cls-20" d="M107,31.8h4.5V30.1a2.2,2.2,0,0,0-2.3-2.2,2.2,2.2,0,0,0-2.2,2.2Zm5.7,0a1.6,1.6,0,0,1,1.4,1.6v5.3a1.6,1.6,0,0,1-1.6,1.6H106a1.7,1.7,0,0,1-1.7-1.6V33.4a1.7,1.7,0,0,1,1.5-1.6V30.1a3.5,3.5,0,0,1,6.9,0Zm-3.5,2.8a.9.9,0,0,1,.9.9,1.2,1.2,0,0,1-.4.8v.8a.5.5,0,0,1-.5.4.4.4,0,0,1-.4-.4v-.8a1,1,0,0,1-.5-.8A.9.9,0,0,1,109.2,34.6Z" transform="translate(0.5 0.5)"/><path class="cls-20" d="M49.8,57.5h4.5V55.9a2.3,2.3,0,1,0-4.5,0Zm5.8.1A1.7,1.7,0,0,1,57,59.2v5.3a1.7,1.7,0,0,1-1.7,1.6H48.8a1.6,1.6,0,0,1-1.6-1.6V59.2a1.6,1.6,0,0,1,1.4-1.6V55.9a3.5,3.5,0,0,1,7,0Zm-3.5,2.8a.9.9,0,0,1,.9.9,1,1,0,0,1-.5.8v.8a.4.4,0,0,1-.4.4.4.4,0,0,1-.4-.4v-.8a.8.8,0,0,1-.5-.8A.9.9,0,0,1,52.1,60.4Z" transform="translate(0.5 0.5)"/><path class="cls-20" d="M227.9,27.8h4.5V26.2a2.3,2.3,0,1,0-4.5,0Zm5.7,0a1.7,1.7,0,0,1,1.5,1.6v5.3a1.7,1.7,0,0,1-1.7,1.6h-6.5a1.6,1.6,0,0,1-1.6-1.6V29.4a1.6,1.6,0,0,1,1.4-1.6V26.2a3.5,3.5,0,1,1,6.9,0Zm-3.4,2.8a.9.9,0,0,1,.4,1.7v.8a.4.4,0,0,1-.4.4.5.5,0,0,1-.5-.4v-.8c-.3-.1-.4-.5-.4-.8A.9.9,0,0,1,230.2,30.6Z" transform="translate(0.5 0.5)"/><path class="cls-20" d="M280.1,44.3h4.5V42.7a2.3,2.3,0,1,0-4.5,0Zm5.7,0a1.6,1.6,0,0,1,1.4,1.6v5.3a1.6,1.6,0,0,1-1.6,1.6h-6.5a1.6,1.6,0,0,1-1.6-1.6V45.9a1.6,1.6,0,0,1,1.4-1.6V42.7a3.5,3.5,0,1,1,6.9,0Zm-3.5,2.8a.9.9,0,0,1,1,.9.9.9,0,0,1-.5.8v.8a.5.5,0,0,1-.5.4.4.4,0,0,1-.4-.4v-.8a.9.9,0,0,1,.4-1.7Z" transform="translate(0.5 0.5)"/></g>
  
 <g id="fill">
    <g id="filled" class="filled">
      <rect class="cls-12" x="111.4" y="26.1" width="8.4" height="10.36"/>
      <line class="cls-13" x1="101.3" y1="39.7" x2="117.9" y2="39.7"/>
      <rect class="cls-12" x="99.4" y="44.5" width="20.4" height="2.33"/>
      <rect class="cls-12" x="99.4" y="48" width="20.4" height="2.33"/>
    </g>
    <g id="filled-2" class="filled">
      <rect class="cls-12" x="172.4" y="15.7" width="8.4" height="10.36"/>
      <line class="cls-13" x1="162.4" y1="29.3" x2="178.9" y2="29.3"/>
      <rect class="cls-12" x="160.5" y="34.1" width="20.4" height="2.33"/>
      <rect class="cls-12" x="160.5" y="37.6" width="20.4" height="2.33"/>
    </g>
    <g id="filled-3" class="filled">
      <rect class="cls-12" x="232.6" y="21.7" width="8.4" height="10.36"/>
      <line class="cls-13" x1="222.6" y1="35.3" x2="239.1" y2="35.3"/>
      <rect class="cls-12" x="220.7" y="40.1" width="20.4" height="2.33"/>
      <rect class="cls-12" x="220.7" y="43.5" width="20.4" height="2.33"/>
    </g>
    <g id="filled-4" class="filled">
      <rect class="cls-12" x="285.2" y="38.3" width="8.4" height="10.36"/>
      <line class="cls-13" x1="275.2" y1="51.9" x2="291.7" y2="51.9"/>
      <rect class="cls-12" x="273.3" y="56.7" width="20.4" height="2.33"/>
      <rect class="cls-12" x="273.2" y="60.1" width="20.4" height="2.33"/>
    </g>
    <g id="filled-5" class="filled">
      <rect class="cls-12" x="55.6" y="51.6" width="8.4" height="10.36"/>
      <line class="cls-13" x1="45.5" y1="65.1" x2="62.1" y2="65.1"/>
      <rect class="cls-12" x="43.6" y="69.9" width="20.4" height="2.33"/>
      <rect class="cls-12" x="43.6" y="73.4" width="20.4" height="2.33"/>
    </g>
  </g>
</svg>
body {
  background: black;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  margin: 30px 0 0;
  font-size: 40px;
  color: #5ba7bc;
}

main {
  width: calc(100vw - 40px);
  height: 150px;
  margin: 30px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    max-width: 670px;
    line-height: 1.4;
  }
}

@media only screen and (max-width: 600px) {
  main {
    margin: 45px 20px;
  }
}

svg {
  width: 100vw;
  height: 70vh;
  visibility: hidden;
}

//exported styles
.cls-259,
.cls-3 {
  fill: none;
  stroke-miterlimit: 10;
}
.cls-3, .cls-259 {
  stroke: #fff;
  opacity: 0.6;
}
.cls-4 {
  opacity: 0.6;
}
.cls-5,
.cls-6,
.cls-7 {
  fill: #fff;
}
.cls-6 {
  opacity: 0.38;
}
.cls-7 {
  opacity: 0.11;
}

.cls-12, .cls-20 {
  fill: #fff;
}

.cls-13 {
  stroke: #fff;
}


#globe-lines-server, #cdn-lines, #file-outside2, #loader, #newfiles, #file-outside, #file-content, #locks, #fill {
  visibility: hidden;
  opacity: 0;
}

.hidden {
  display: none;
}
View Compiled
const readingtime = 8;

//------------------//
//    helpers       //
//------------------//

const hideShow = (el1, el2) => {
  let elref1 = document.querySelector(el1)
  elref1.classList.add('hidden')
  
  let elref2 = document.querySelector(el2)
  elref2.classList.remove('hidden')
}

const animateHeading = (tl, el1, el2) => {
 tl.to(`${el1}`, { 
    opacity: 0, 
    duration: 0.4,
    ease: 'sine.in' 
  }, `+=${readingtime}`) 
  tl.call(hideShow, [el1, el2])
  tl.fromTo(`${el2}`, { 
    opacity: 0
  }, {
    opacity: 1, 
    duration: 0.5,
    delay: 1,
    ease: 'sine' 
  }) 
  return tl
}

gsap.set('svg', {
  visibility: 'visible'
})

//------------------//
//     scenes       //
//------------------//

const words = () => {
  let tl = gsap.timeline({
    delay: 0.5
  })

  tl.add('begin')
  tl.fromTo(`.p1`, { 
    opacity: 0,
    duration: 1
  }, {
    opacity: 1, 
    ease: 'sine' 
  }, 'begin') 
  tl.fromTo('svg', {
    autoAlpha: 0
  }, {
    autoAlpha: 1
  }, 'begin')
  tl.call(animateHeading, [tl, '.p1', '.p2'])
  tl.call(animateHeading, [tl, '.p2', '.p3'])
  tl.call(animateHeading, [tl, '.p3', '.p4'])
  tl.call(animateHeading, [tl, '.p4', '.p5'])
  tl.call(animateHeading, [tl, '.p5', '.p6'])
  
  return tl
}


const scene1 = () => {
  let tl1 = gsap.timeline({
    delay: 1,
    defaults: {
      duration: 1
    }
  })

  tl1.add('start1')
  tl1.to('#globe-lines-server', {
    duration: 0.2,
    autoAlpha: 1, 
    ease: 'sine'
  }, 'start1')
  tl1.fromTo('.forwards', {
    drawSVG: 0
  }, {
    drawSVG: true,
    ease: 'sine'
  }, 'start1')
   tl1.fromTo('.backwards', {
    drawSVG: '100% 100%'
  }, {
    drawSVG: '100% 0',
    ease: 'sine'
  }, 'start1')
  tl1.to('#file-outside, #loader', {
    autoAlpha: 1, 
    ease: 'sine'
  }, 'start1+=2')
  tl1.to('#loader', {
    rotation: 1925,
    duration: 5.5,
    ease: 'linear',
    transformOrigin: '50% 50%'
  }, 'start1+=2')
  tl1.to('#loader, #file-outside, #globe-lines-server', {
    duration: 0.3,
    autoAlpha: 0,
    ease: 'sine.in'
  }, 'start1+=7')
  
  return tl1
}

const scene2 = () => {
  let tl = gsap.timeline({
    delay: readingtime + 2,
    defaults: {
      duration: 1
    }
  })

  tl.add('start2')
  tl.to('#globe-lines-server', {
    duration: 0.2,
    autoAlpha: 1, 
    ease: 'sine'
  }, 'start2')
  tl.fromTo('.forwards', {
    drawSVG: 0
  }, {
    drawSVG: true,
    ease: 'sine'
  }, 'start2')
   tl.fromTo('.backwards', {
    drawSVG: '100% 100%'
  }, {
    drawSVG: '100% 0',
    ease: 'sine'
  }, 'start2')
  tl.to('#file-outside, #file-content', {
    autoAlpha: 1, 
    ease: 'sine'
  }, 'start2+=2')
  
  return tl
}

const scene3 = () => {
  let tl = gsap.timeline({
    delay: readingtime * 2 + 4,
    defaults: {
      duration: 1
    }
  })

  tl.add('start3')
  tl.to('#file-content, #file-outside', {
    x: -20,
    ease: 'sine'
  }, 'start3')
  tl.to('#loader, #file-outside2', {
    duration: 0.2,
    autoAlpha: 1,
    ease: 'sine'
  }, 'start3+=1')
  tl.to('#loader, #file-outside2', {
    x: 20,
    ease: 'sine'
  }, 'start3+=1')
  tl.to('#loader', {
    rotation: 3850,
    duration: 5.5,
    ease: 'linear',
    transformOrigin: '50% 50%'
  }, 'start3+=0.75')
  tl.to('#loader, #file-outside, #globe-lines-server, #file-outside2, #file-content', {
    duration: 0.3,
    autoAlpha: 0,
    ease: 'sine.in'
  }, 'start3+=7')
  tl.to('#file-outside, #file-content', {
    duration: 0.1,
    x: 0
  }, 'start3+=8')
  
  return tl
}

const scene4 = () => {
  let tl = gsap.timeline({
    delay: readingtime * 3 + 6,
    defaults: {
      duration: 1
    }
  })

  tl.add('start4')
  tl.to('#file-outside, #newfiles', {
    autoAlpha: 1,
    ease: 'sine'
  }, 'start4')
  tl.to('#file-content', {
    autoAlpha: 0.7,
    ease: 'sine'
  }, 'start4')
   tl.to('#cdn-lines', {
    duration: 0.2,
    autoAlpha: 1, 
    ease: 'sine'
  }, 'start4')
  tl.fromTo('#cdn-lines path', {
    drawSVG: 0
  }, {
    drawSVG: true,
    ease: 'sine'
  }, 'start4')
  
  return tl
}

const scene5 = () => {
  let tl = gsap.timeline({
    delay: readingtime * 5,
    defaults: {
      duration: 1
    }
  })

  tl.add('start5')
  tl.to('#fill', {
    autoAlpha: 1,
    duration: 0.1,
    ease: 'sine'
  }, 'start6')
  tl.fromTo('.filled line, .filled rect', {
    autoAlpha: 0
  }, {
    autoAlpha: 0.5,
    ease: 'sine'
  }, 'start6+=0.1')
  
  return tl
}

const scene6 = () => {
  let tl = gsap.timeline({
    delay: readingtime * 6 + 2,
    defaults: {
      duration: 1
    }
  })

  tl.add('start6')
  tl.to('#locks', {
    autoAlpha: 1,
    ease: 'sine'
  }, 'start6')
  
  return tl
}



//------------------//
//     master       //
//------------------//

window.onload = () => {
  const wordstl = words()
  const sceneOne = scene1()
  const sceneTwo = scene2()
  const sceneThree = scene3()
  const sceneFour = scene4()
  const sceneFive = scene5()
  const sceneSix = scene6()
  
  const master = gsap.timeline()
  master.add('wordstl')
  master.add('sceneOne')
  master.add('sceneTwo')
  master.add('sceneThree')
  master.add('sceneFour')
  master.add('sceneFive')
  master.add('sceneSix')
};
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js