Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="old-browser" class="container">
  <h4 class="text-center">We've determined you're using an outdated browser. For the best experience, please view the GLF Trends <a href="#">here</a> or use a modern browser.</h4>
</div>
<div class="container-fluid container-outter">
  <img src="https://assets.codepen.io/3697225/Covid.svg" id="covid-background" />
  <img src="https://assets.codepen.io/3697225/Clock.svg" id="clock-background" />
  <div class="container container-inner">
    <section class="section intro d-flex flex-column align-items-center text-center">
      <img src="https://assets.codepen.io/3697225/GLFLogo.svg" id="intro-logo" class="mt-3" />
      <h2 class="bold text-white text-shadow mt-3 mb-lg-3" id="intro-tagline">Global Leadership Trends for 2021</h2>
      <div class="yellow-card d-flex justify-content-center align-items-center px-5 my-1">
        <p class="mb-0 bold">Do companies have the talent they need for the future?</p>
        <div class="yellow-card-triangle-left"></div>
      </div>
      <div class="yellow-card d-flex justify-content-center align-items-center px-5 my-1">
        <p class="mb-0 bold">How has COVID-19 impacted leaders?</p>
        <div class="yellow-card-triangle-right"></div>
      </div>
      <div class="yellow-card d-flex justify-content-center align-items-center px-5 my-1">
        <p class="mb-0 bold">What leadership trends are emerging for 2021</p>
        <div class="yellow-card-triangle-left"></div>
      </div>
      <div class="keep-scrolling-container mt-auto">
        <p class="text-white text-shadow">Scroll to see our top 5 findings</p>
        <i class="fas fa-angle-down fa-3x text-white bouncing-triangle"></i>
      </div>
    </section>
    <section class="section finding1 d-flex flex-column align-items-center justify-content-center">
      <div class="d-flex align-items-center justify-content-between justify-content-md-start text-center px-3 mt-5 w-100">
        <h2 class="bold text-shadow purple1">#1</h2>
        <h3 class="bold text-shadow purple1 mt-2 mt-md-0 ml-md-3">Bench Strength Drops to a New Low</h3>
      </div>
      <div id="chart-container" class="mt-3">
        <div id="chart-2011" class="d-flex align-items-center justify-content-end my-3">
          <p class="text-white bold mb-0 mr-auto ml-3">2011</p>
          <p class="text-white bold mb-0 mr-3 text-shadow">18%</p>
        </div>
        <div id="chart-2014" class="d-flex align-items-center justify-content-end my-3">
          <p class="text-white bold mb-0 mr-auto ml-3">2014</p>
          <p class="text-white bold mb-0 mr-3 text-shadow">15%</p>
        </div>
        <div id="chart-2017" class="d-flex align-items-center justify-content-end my-3">
          <p class="text-white bold mb-0 mr-auto ml-3">2017</p>
          <p class="text-white bold mb-0 mr-3 text-shadow">14%</p>
        </div>
        <div id="chart-2020" class="d-flex align-items-center justify-content-end my-3">
          <p class="text-white bold mb-0 mr-auto ml-3">2020</p>
          <p class="text-white bold mb-0 mr-3 text-shadow">11%</p>
          <div class="d-flex justify-content-center align-items-center px-2 text-center" id="chart-tooltip">
            <p class="mb-0 bold">Bench strength reaches an all-time low.</p>
            <div id="chart-tooltip-triangle"></div>
          </div>
        </div>
        <p class="text-secondary">Percentage of HR saying they have a strong bench to fill leadership roles</p>
      </div>
      <div id="finding1-takeaway-container" class="d-flex align-items-center justify-content-center mt-5">
        <img class="d-none d-lg-block" src="https://assets.codepen.io/3697225/person.svg" id="finding1-takeaway-img" />
        <p id="finding1-takeaway-text" class="bold ml-lg-5"><span class="yellow1">Only 47% of critical roles can be filled by current leaders.</span> It's clear organizations don't have the leaders they need today, or for the future. </p>
      </div>
    </section>
    <section class="section finding2 d-flex flex-column align-items-center justify-content-center">
      <div class="d-flex align-items-center justify-content-between justify-content-md-start text-center px-3 mt-5 w-100">
        <h2 class="bold text-shadow blue1">#2</h2>
        <h3 class="bold text-shadow blue1 mt-2 mt-md-0 ml-md-3">COVID-19 Tested Leaders' Skills</h3>
      </div>
      <div class="container">
        <p class="bold text-center text-md-left mt-3">Digital acumen became 25% more important for leaders responding to the crisis.</p>
      </div>
      <div class="container mt-3">
        <div class="row">
          <div class="col-12 col-lg-6">
            <p id="positive-stat-tagline" class="bold text-secondary">Leaders had to be more prepared for:</p>
            <div class="w-100 d-flex align-items-center">
              <img class="finding2-stats positive-stats" src="https://assets.codepen.io/3697225/preparedstat1-final.svg">
              <p class="mb-0 ml-2"><span class="yellow1">Responding to competition</span> in their industry</p>
            </div>
            <div class="w-100 d-flex align-items-center">
              <img class="finding2-stats positive-stats" src="https://assets.codepen.io/3697225/preparedstat2-final.svg">
              <p class="mb-0 ml-2"><span class="yellow1">Innovating to improve</span> products and services</p>
            </div>
          </div>
          <div class="col-12 col-lg-6 mt-5 mt-lg-0">
            <p id="negative-stat-tagline" class="bold text-secondary">Leaders were less effective at:</p>
            <div class="w-100 d-flex align-items-center">
              <img class="finding2-stats negative-stats" src="https://assets.codepen.io/3697225/lesspreparedstat1-final.svg">
              <p class="mb-0 ml-2"><span class="purple1">Leading virtual teams</span> and contractors</p>
            </div>
            <div class="w-100 d-flex align-items-center">
              <img class="finding2-stats negative-stats" src="https://assets.codepen.io/3697225/lesspreparedstat2-final.svg">
              <p class="mb-0 ml-2"><span class="purple1">Using empathy</span> or emotional intelligence</p>
            </div>
          </div>
        </div>
      </div>
      <div id="" class="d-none d-lg-flex align-items-center justify-content-center mt-5">
        <p id="finding2-takeaway-text" class="bold mr-lg-5">Through the pandemic, leaders faced new challenges in remote work and more difficult conversations. Ratings of their own effectiveness in virtual leadership and empathy dropped significantly.</p>
        <img class="d-none d-lg-block" src="https://assets.codepen.io/3697225/videochat.svg" id="finding2-takeaway-img" />
      </div>
    </section>
    <section class="section-flexible finding3 d-flex flex-column align-items-center justify-content-center">
      <div class="d-flex align-items-center justify-content-between justify-content-md-start text-center px-3 mt-5 w-100">
        <h2 class="bold text-shadow green1">#3</h2>
        <h3 class="bold text-shadow green1 mt-2 mt-md-0 ml-md-3">During Crisis, Leaders Spend Time Differently</h3>
      </div>
      <div class="container mt-3" id="finding3-chart-container">
        <p class="bold">
          Preference to learn online
        </p>
        <div class="d-flex align-items-center mb-2">
          <div class="finding3-label-container">
            <p class="mb-0">Pre-COVID</p>
          </div>
          <div id="chart-precovid" class="ml-3 d-flex justify-content-end align-items-center finding3-chart">
            <p class="text-white bold mb-0 mr-3 text-shadow">28%</p>
          </div>
        </div>
        <div class="d-flex align-items-center mb-2">
          <div class="finding3-label-container">
            <p class="mb-0">During Crisis</p>
          </div>

          <div id="chart-during-crisis" class="ml-3 d-flex justify-content-end align-items-center finding3-chart">
            <p class="text-white bold mb-0 mr-3 text-shadow">36%</p>
          </div>
        </div>
        <div class="d-flex align-items-center mb-2">
          <div class="finding3-label-container">
            <p>New Normal</p>
          </div>
          <div id="chart-new-normal" class="ml-3 d-flex justify-content-end align-items-center finding3-chart">
            <p class="text-white bold mb-0 mr-3 text-shadow">40%</p>
          </div>
        </div>
      </div>
      <div class="container mt-3" id="hours-leaders-want-container">
        <div class="row">
          <div class="col-12">
            <p class="bold mt-2">Hours Leaders Want to Spend Learning per Week</p>
          </div>
          <div class="col-4 d-flex flex-column justify-content-between align-items-center">
            <p class="text-center">Pre-COVID</p>
            <img class="finding3-hours-leaders-want" src="https://assets.codepen.io/3697225/7_3.svg" height="85" width="85">
          </div>
          <div class="col-4 d-flex flex-column justify-content-between align-items-center">
            <p class="text-center">During Crisis</p>
            <img class="finding3-hours-leaders-want" src="https://assets.codepen.io/3697225/8_9-final.svg" height="85" width="85">
          </div>
          <div class="col-4 d-flex flex-column justify-content-between align-items-center">
            <p class="text-center">New Normal</p>
            <img class="finding3-hours-leaders-want" src="https://assets.codepen.io/3697225/6_8-final.svg" height="85" width="85">
          </div>
        </div>
      </div>
      <div class="container mt-3" id="hours-leaders-spend-container">
        <div class="row">
          <div class="col-12">
            <p class="bold mt-2">Hours Leaders Currently Spend Learning per Week</p>
          </div>
          <div class="col-4 d-flex flex-column justify-content-between align-items-center">
            <p class="text-center">Pre-COVID</p>
            <img class="finding3-hours-leaders-spend" src="https://assets.codepen.io/3697225/3_9-green-final_1.svg" height="85" width="85">
          </div>
          <div class="col-4 d-flex flex-column justify-content-between align-items-center">
            <p class="text-center">During Crisis</p>
            <img class="finding3-hours-leaders-spend" src="https://assets.codepen.io/3697225/5_6-final_1.svg" height="85" width="85" >
          </div>
          <div class="col-4 d-flex flex-column justify-content-between align-items-center">
            <p class="text-center">New Normal</p>
            <img class="finding3-hours-leaders-spend" src="https://assets.codepen.io/3697225/3_9-yellow-final_1.svg" height="85" width="85">
          </div>
        </div>
      </div>
      <div id="finding3-takeaway-container" class="d-flex align-items-center justify-content-center mt-5">
        <img class="d-none d-lg-block" src="https://assets.codepen.io/3697225/Online-learning.svg" id="finding3-takeaway-img" />
        <p id="finding3-takeaway-text" class="bold ml-lg-5">
          When in crisis mode, leaders are more likely to seek support. During the onset of the COVID-19 crisis, they spent more time on development, especially online.
        </p>
      </div>
    </section>
    <div id="space-maker"></div>
    <section class="section finding4 d-flex flex-column align-items-center justify-content-center">
      <div class="d-flex align-items-center justify-content-between justify-content-md-start text-center px-3 mt-5 w-100">
        <h2 class="bold text-shadow yellow1">#4</h2>
        <h3 class="bold text-shadow yellow1 mt-2 mt-md-0 ml-md-3">Leaders Stepped Up During Crisis</h3>
      </div>
      <div class="container d-lg-none">
        <p class="bold text-center text-md-left mt-3">Leaders grew more positive about senior leaders</p>
      </div>
      <div class="mt-5 container d-flex align-items-center justify-content-start" id="">
        <img src="https://assets.codepen.io/3697225/Leaders-stepping-up-chart-better.svg" class="" id="stepping-up-chart">
        <div class="d-none d-lg-flex justify-content-center align-items-center ml-5" id="finding4-tooltip">
          <div id="finding4-tooltip-triangle"></div>
          <p class="mb-0 bold text-center">Leaders grew more positive about senior leaders.</p>
        </div>
      </div>
      <div id="finding4-takeway-container" class="d-flex align-items-center justify-content-center mt-5">
        <p id="finding4-takeaway-text" class="bold mr-lg-5"><span class="yellow1">Leadership ratings peaked 14% higher </span> at the onset of the COVID-19 crisis. The pandemic required more of all leaders, especially senior leaders.</p>
        <img class="d-none d-lg-block" src="https://assets.codepen.io/3697225/positive-leaders.svg" id="finding4-takeaway-img" />
      </div>
    </section>
    <section class="section finding5 d-flex flex-column align-items-center justify-content-center">
      <div class="d-flex align-items-center justify-content-between justify-content-md-start text-center px-3 mt-5 w-100">
        <h2 class="bold text-shadow blue3 mr-2">#5</h2>
        <h3 class="bold text-shadow blue3 mt-2 mt-md-0 ml-md-3">Leaders Struggle to Handle Burnout</h3>
      </div>
      <div class="container mt-5">
        <div class="row">
          <div class="col-12 col-lg-6" id="leaders-confident-container">
            <p class="bold text-center text-md-left text-secondary">Leaders are <span class="blue3">most confident...</span></p>
            <div class="d-flex align-items-center justify-content-start my-2 leaders-confident-stat">
              <h2 class="mb-0 bold blue3">55%</h2>
              <p class="mb-0 ml-3">Achieving their team’s goals</p>
            </div>
            <div class="d-flex align-items-center justify-content-start my-2 leaders-confident-stat">
              <h2 class="mb-0 bold blue3">51%</h2>
              <p class="mb-0 ml-3">Rallying their team around a common purpose</p>
            </div>
            <div class="d-flex align-items-center justify-content-start my-2 leaders-confident-stat">
              <h2 class="mb-0 bold blue3">47%</h2>
              <p class="mb-0 ml-3">Building team enthusiasm and engagement</p>
            </div>
          </div>
          <div class="d-none d-lg-flex col-lg-6 justify-content-start align-items-baseline">
            <img src="https://assets.codepen.io/3697225/trophy-alt-final_1.svg" id="badge-check"/>
          </div>
        </div>
        <div class="row mt-5">
          <div class="col-12 col-lg-6" id="leaders-less-confident-container">
            <p class="bold text-center text-md-left text-secondary">But <span class="purple1">least confident...</span></p>
            <div class="d-flex align-items-center justify-content-start my-2 leaders-confident-stat">
              <h2 class="mb-0 bold purple1">18%</h2>
              <p class="mb-0 ml-3">Helping team members avoid burnout</p>
            </div>
            <div class="d-flex align-items-center justify-content-start my-2 leaders-confident-stat">
              <h2 class="mb-0 bold purple1">14%</h2>
              <p class="mb-0 ml-3">Making the right hiring decision</p>
            </div>
            <div class="d-flex align-items-center justify-content-start my-2 leaders-confident-stat">
              <h2 class="mb-0 bold purple1">12%</h2>
              <p class="mb-0 ml-3">Navigating organizational politics</p>
            </div>
          </div>
          <div class="d-none d-lg-flex col-lg-6 justify-content-start align-items-baseline">
            <img src="https://assets.codepen.io/3697225/angry-final.svg" id="thumbs-down"/>
          </div>
        </div>
      </div>
    </section>
    <section class="section outtro d-flex flex-column align-items-start justify-content-center">
      <h2 class="bold text-white text-shadow">This infographic is from the</h2>
      <h1 class="bold text-white text-shadow">Global Leadership Forecast Series</h1>
      <h2 class="bold text-white text-shadow mt-lg-5 mt-1">examining responses from</h2>
      <h3 class="bold mt-3 yellow1 text-shadow">15,787 Leaders</h3>
      <h3 class="bold yellow1 text-shadow">2,102 HR Professionals</h3>
      <h3 class="bold yellow1 text-shadow">1, 742 Organizations</h3>
      
      <a class="btn ddi-button-primary two-z">Explore the Global Leadership Forecast</a>
      <a href="#" class="text-white mt-lg-3 two-z"><u>Download a PDF of GLF trends</u></a>

      <p class="text-white" id="copy-right">&copy; Development Dimensions International, Inc. 2020 All rights reserved</p>
      

      <svg id="svg-globe" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1423.1px" height="1424px" viewBox="0 0 1423.1 1424" style="overflow:visible;enable-background:new 0 0 1423.1 1424;" xml:space="preserve">
        <style type="text/css">
          .st0 {
            fill: #960E76;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st1 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #BED12B;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st2 {
            fill: #EC6723;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st3 {
            fill: #3984B5;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st4 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #EC6723;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st5 {
            fill: #445765;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st6 {
            fill: #F9A31A;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st7 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #ED3341;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st8 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #62165C;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st9 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #89941D;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st10 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #53C6DE;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st11 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #960E76;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st12 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #3984B5;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st13 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #F9A31A;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st14 {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #445765;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st15 {
            fill: #89941D;
            stroke: #FFFFFF;
            stroke-width: 4.0235;
            stroke-miterlimit: 10;
          }

          .st16 {
            fill: #FFFFFF;
          }
        </style>
        <defs>
        </defs>
        <g>
          <g>
            <path class="st0" d="M711.6,714.1L605.8,12.3c30.1-5.2,51.3-3.8,56.4-4.1L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st1" d="M711.6,714.1l-459.3-541C348.9,91,475,33.2,605.8,12.3L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st2" d="M252.3,173.1c-57.8,49.1-107.7,107.4-147.4,172.5" />
            <path class="st3" d="M711.6,714.1L92.7,371.1C128.9,295.2,189,228,252.3,173.1L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st4" d="M711.6,714.1L17.9,564c12.3-55.2,29.9-112.2,57.7-160.1L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st5" d="M711.6,714.1L8,621.1c2.5-19.3,5.8-38.3,9.9-57.1L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st6" d="M711.6,714.1L2.9,678.5c1-19.3,2.7-38.5,5.2-57.4L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st7" d="M711.6,714.1L7,798.8c-4.9-40.7-6.2-83.2-3.9-124.6L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st8" d="M711.6,714.1L17.5,862.4c-4.5-20.9-8-42.1-10.5-63.6L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st9" d="M711.6,714.1L42.5,951c-10.2-28.7-18.6-58.3-25-88.6L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st10" d="M711.6,714.1L57.5,989.6c-5.4-12.7-10.3-25.5-15-38.6L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st11" d="M711.6,714.1L79.1,1036.1c-7.8-15.2-15-30.6-21.6-46.4L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st1" d="M711.6,714.1C709.8,715.2,98.6,1068,97,1069c-6.3-10.8-12.2-21.8-17.9-33L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st4" d="M711.6,714.1l-466.9,534.5c-45.9-40.1-86.5-86-120.8-136.5c0.3-0.8,0.7-1.5,1-2.3L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st12" d="M711.6,714.1v707.6c-171,4.5-342.9-63.6-466.9-173.1L711.6,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st13" d="M941.7,1385.6c-57.1,19.6-117.5,32.1-180.2,36.4c-1.4-0.9-49.4-706.4-49.9-707.9L941.7,1385.6z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st14" d="M1327.7,1066.3c-85,148.3-221.9,263.1-386,319.3L711.6,714.1L1327.7,1066.3z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st7" d="M1376.1,963.5c-7.8,20.9-16.6,41.3-26.3,61.2L711.6,714.1L1376.1,963.5z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st8" d="M1398,894.7c-6.2,23.4-13.5,46.4-21.9,68.8L711.6,714.1L1398,894.7z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st15" d="M1404.7,866.5c-2.1,9.5-4.3,18.9-6.8,28.2L711.6,714.1L1404.7,866.5z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st10" d="M1411.2,833.2c-1.8,10.6-4.2,22.8-6.4,33.3L711.6,714.1L1411.2,833.2z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st11" d="M1420.7,739.3c-1.1,32.1-4.4,63.6-9.6,94.5L711.6,714.1L1420.7,739.3z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st1" d="M1421.1,714.1c0,8.4-0.1,16.8-0.4,25.2l-709.1-25.2l700.4-114C1418,637.3,1421.1,675.3,1421.1,714.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st12" d="M1412,600.2l-700.4,114l693.1-152.6C1407.5,574.3,1409.9,587.2,1412,600.2z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st4" d="M1404.7,561.5L711.6,714.1l676.1-215.9C1394,518.1,1400.1,540.9,1404.7,561.5z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st14" d="M1388,499.1L711.6,714.1l658.5-264.8C1376.6,465.6,1382.6,482.2,1388,499.1z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st6" d="M1370.1,449.4L711.6,714.1L1325.4,358C1342.4,387.2,1357.4,417.7,1370.1,449.4z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st12" d="M1298.9,315.9L711.6,714.1l570.6-421.8C1287.9,300.1,1293.5,307.9,1298.9,315.9z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st4" d="M1246.4,247.8c12.5,14.3,24.5,29.2,35.8,44.5L711.6,714.1l534.1-467" />
          </g>
        </g>
        <g>
          <g>
            <path class="st14" d="M1246.4,247.8c0,0-534.8,466.3-534.8,466.3l370-607C1143.5,145.3,1199.1,192.9,1246.4,247.8z" />
          </g>
        </g>
        <g>
          <g>
            <path class="st13" d="M1081.6,107.1l-370,607l17.9-712C858.4,5.6,978.7,43.5,1081.6,107.1z" />
          </g>
        </g>
        <path class="st16" d="M1323.4,709.9c-13.7,800.6-1204.5,800.5-1218.1,0C119-90.7,1309.8-90.6,1323.4,709.9z" />
      </svg>

    </section>
  </div>
</div>
              
            
!

CSS

              
                /*Redirect IE11 users*/
@supports(display:grid){
  #old-browser{
    display:none;
  }
}


/*Typography*/
h1, h2, h3, h4, h5, p, span{
  font-family: 'Open Sans', sans-serif;
}

.bold{
  font-weight:800;
}

.text-shadow{
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

.purple1{
  color:#8A1B61;
}

.steel{
  color:#425563;
}

.green1{
  color:#949300;
}

.blue1{
  color:#236192;
}

.blue3{
  color:#00AEC7;
}

.yellow1{
  color:#FFA300;
}

.orange{
  color:#F06400;
}

.ddi-button-primary{
   background-color: #00aec7;
  color: #fff !important;
  transition: background .5s,color .5s,border .5s;
  cursor: pointer;
  border-radius: 0;
  font-weight: 700;
  width: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 25px;
}

.ddi-button-primary:hover{
  background-color: #236192;
}

/*Containers*/
.section{
  height:auto;
  //border:1px dashed grey;
  visibility:hidden;
}

.section:nth-child(odd){
  background:grey;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 736px) 
and (orientation : landscape){ 
  .section{
    height:auto;
    border:2px dashed grey;
    visibility:hidden;
  }
}

/*Some sections can't fit all info on 100vh on mobile. This is what we use for those cases*/
.section-flexible{
  height:auto;
}

@media (min-width: 992px){
  .section-flexible{
    height:100vh;
  }
}

.container-outter{
  background:#236192;
  overflow:hidden;
}

#covid-background{
  position: fixed;
  right: 0;
  height: 37%;
}

@media (min-width: 992px) {
    #covid-background{
      height: 80%;
  }
}

#clock-background{
  position: fixed;
  right: 25px;
  height: 37%;
}

@media (min-width: 992px) {
    #clock-background{
      height: 80%;
  }
}


/*Space between section 3 and 4 because section 3 has so much content*/
@media (min-width: 992px){
  #space-maker{
    height:200px;
  }
}

/*intro*/
#intro-logo{
  max-width: 175px;
  width:100%;
}

.yellow-card{
  background:#FFA300;
  height:100px;
  width: 75%;
  box-shadow:0px 2px 4px rgba(0, 0, 0, 0.18);
}

@media (min-width: 992px) { 
  .yellow-card{
    height:115px;
    max-width:400px;
  }
  .intro > .yellow-card:nth-child(even){
    margin-left:175px;
  }
  .intro > .yellow-card:nth-child(odd){
    margin-right:175px;
  }
  
  .yellow-card-triangle-left{
      width:0;
      height:0;
      border-top: 25px solid transparent;
      border-bottom:25px solid transparent;
      border-right:25px solid #FFA300;
      position:absolute;
      left:0;
      top:31px;
      transform:translateX(-100%);
  }
  .yellow-card-triangle-right{
      width:0;
      height:0;
      border-top: 25px solid transparent;
      border-bottom:25px solid transparent;
      border-left:25px solid #FFA300;
      position:absolute;
      right:0;
      top:31px;
      transform:translateX(100%);
  }
}


/*Finding 1*/
#chart-container{
  position:relative;
  width:100%;
}

#chart-container > div{
  height:65px;
  background:#8A1B61;
  position:relative;
  box-shadow:0px 2px 4px rgba(0, 0, 0, 0.18);
}

#chart-2011{
  width:85%;
}

#chart-2014{
  width:65%;
}

#chart-2017{
  width:55%;
}

#chart-2020{
  width:35%;
}

#chart-tooltip{
  position:absolute;
  height:85px;
  width:175px;
  right:0;
  background:#FFA300;
  transform:translateX(108%);
  box-shadow:0px 2px 4px rgba(0, 0, 0, 0.18);
}

#chart-tooltip-triangle{
  
}

@media (min-width: 992px) { 
  #chart-tooltip{
    height:75px;
    width:215px;
    transform:translateX(115%)
  }
  
  #chart-tooltip-triangle{
      width:0;
      height:0;
      border-top: 25px solid transparent;
      border-bottom:25px solid transparent;
      border-right:25px solid #FFA300;
      position:absolute;
      left:10px;
      top:15px;
      transform:translateX(-100%);
  }
}

#finding1-takeaway-img{
  width:100%;
  max-width:85px;
}

@media (min-width: 992px) { 
  #finding1-takeaway-text{
    width:50%;
  }
}

/*finding 2*/
.finding2-stats{
  height:75px;
  width:75px;
}

#finding2-takeaway-img{
  width:100%;
  max-width:200px;
}

@media (min-width: 992px) { 
  #finding2-takeaway-text{
    width:50%;
  }
}

/*Finding 3*/

.finding3-label-container{
  width:20%
}

@media (min-width: 992px) { 
  .finding3-label-container{
    width:10%
  }
}

#chart-precovid{
  background:#949300;
  height:65px;
  width:28%;
}

#chart-during-crisis{
  background:#8A1B61;
  height:65px;
  width:36%;
}

#chart-new-normal{
  background:#F06400;
  height:65px;
  width:40%;
}

#finding3-takeaway-img{
    width:100%;
  max-width:200px;
}

@media (min-width: 992px) { 
  #finding3-takeaway-text{
    width:50%;
  }
}

/*Finding 4*/
#stepping-up-chart{
  width:100%;
  max-width:450px;
}

#finding4-takeaway-img{
  width:100%;
  max-width:120px;
}

@media (min-width: 992px) { 
  #finding4-takeaway-text{
    width:50%;
  }
}

#finding4-tooltip{
  background:#FFA300;
  height:100px;
  width: 320px;
  box-shadow:0px 2px 4px rgba(0, 0, 0, 0.18);
  position:relative;
}

#finding4-tooltip-triangle{
  width:0;
  height:0;
  border-top: 35px solid transparent;
  border-bottom:35px solid transparent;
  border-right:35px solid #FFA300;
  position:absolute;
  left:10px;
  top:15px;
  transform:translateX(-100%);
}

/*Finding 5*/
#thumbs-down{
  max-height:200px;
}

#badge-check{
  max-height:200px;
}

/*Outtro*/
.outtro{
  position:relative;
}

#copy-right{
  position:absolute;
  bottom:10px;
  left:10px;
}

#svg-globe{
  display:none;
}

@media (min-width: 992px) { 
  #svg-globe{
    display:block;
    position: absolute;
    height: 800px;
    bottom: -299px;
    opacity:.35;
    z-index:1;
  }
}


.two-z{
  z-index:2;
}
              
            
!

JS

              
                function cleanInit(){
  
  //Because so much of this is controlled by scrollTrigger, we're not bothering with a master timeline. We're building 
  //individual timelines within these functions. 
  
  function animateIntro(){
    
    // Main timeline does the intro animation
    let tl = gsap.timeline();
    let staggersX = gsap.utils.wrap(['-200', '200']);
    
        tl.set('.section', {autoAlpha:1})
          .from('#intro-logo', {opacity:0, y:-100})
          .from('#intro-tagline', {opacity:0, y:100}, '<')
          .from('.yellow-card', {opacity:0, x:staggersX, stagger:.3})
          .from('.keep-scrolling-container', {opacity:0, delay:.5})
          .to('.bouncing-triangle', {y:-6, repeat:-1, yoyo:true});
    
    // Standalone tween to change background color on scroll
    gsap.fromTo('.container-outter', {background:'#236192'},{background:'#eee', scrollTrigger:{
      trigger: '.finding1',
      start: 'top center',
      end: 'center center',
      scrub: 1,
    }});
    
  }
  
  function animateFinding1(){
    
  }
  
  function animateFinding2(){
    
  }
  
  function animateFinding3(){
    
  }
  
  function animateFinding4(){
    
  }
  
  function animateFinding5(){
    
  }
  
  function animateOuttro(){
    
  }
  
  animateIntro();
  // animateFinding1();
  // animateFinding2();
  // animateFinding3();
  // animateFinding4();
  // animateFinding5();
}

function init(){
  
  gsap.registerPlugin(MotionPathPlugin, ScrollTrigger, MorphSVGPlugin);
  
  
  const globalTL = gsap.timeline();
  //Finding 2 Bench Strength

  
  
  function animateIntro(){
    let tl = gsap.timeline();
    var staggersX = gsap.utils.wrap(['-200', '200']);
    
        tl.set('.section', {autoAlpha:1})
          .from('#intro-logo', {opacity:0, y:-100})
          .from('#intro-tagline', {opacity:0, y:100}, '<')
          .from('.yellow-card', {opacity:0, x:staggersX, stagger:.3})
          .from('.keep-scrolling-container', {opacity:0, delay:.5})
          .to('.bouncing-triangle', {y:-6, repeat:-1, yoyo:true})
          .fromTo('.container-outter', {background:'#236192'},{background:'#eee', scrollTrigger:{
            trigger: '.finding1',
            start: 'top center',
            end: 'center center',
            scrub: 1,
            //markers: true
            
          }})
    
    return tl;
  }
  
  function animateFinding1(){
    const bars = document.querySelectorAll('#chart-container > div');
    let tl = gsap.timeline({scrollTrigger:{
          trigger:'#chart-container',
          start:'top center',
          //markers:true
        }});
        
        tl.from(bars, {opacity:0, duration:1, stagger:.25, y:-50})
          .to('#chart-tooltip', {scale:1.1, repeat:-1, duration:1, yoyo:true})
          .from('#finding1-takeaway-img', {x:-100, opacity:0}, '<')
          .from('#finding1-takeaway-text', {x:100, opacity:0}, '<')
      //Don't nest timelines that have scroll triggers.
  }
  
  function animateFinding2(){
      gsap.from('.positive-stats', {y:35, opacity:0, stagger:.25, scrollTrigger:{
          trigger:'#positive-stat-tagline',
          //markers: true,
          start: 'top 65%'
        }});
    
      gsap.from('.negative-stats', {y:35, opacity:0, stagger:.25, scrollTrigger:{
          trigger:'#negative-stat-tagline',
          //markers: true,
          start: 'top 65%'
        }});
    
      gsap.from('#finding2-takeaway-img', {x:100, opacity:0, scrollTrigger: {
        trigger:'#finding2-takeaway-img',
        start:'top 65%',
        //markers: true
      }})
      gsap.from('#finding2-takeaway-text', {x:-100, opacity:0, scrollTrigger: {
        trigger:'#finding2-takeaway-img',
        start:'top 65%',
      }})
  }
  
  function animateFinding3(){
    gsap.from('.finding3-chart', {opacity:0, y:-50, stagger:.25, scrollTrigger:{
      trigger: '#finding3-chart-container',
      start: 'top center',
      //markers: true
    }});
    
    gsap.from('.finding3-hours-leaders-want', {opacity:0, y:50, scrollTrigger:{
      trigger: '#hours-leaders-want-container',
      start: 'top center',
      //markers:true
    }});
    
    gsap.from('.finding3-hours-leaders-spend', {opacity:0, y:50, scrollTrigger:{
      trigger: '#hours-leaders-spend-container',
      start: 'top center',
      //markers:true
    }});
    
    gsap.from('#finding3-takeaway-img', {x:-100, opacity:0 ,scrollTrigger: {
      trigger: '#finding3-takeaway-container',
      start: 'top center'
    }})
    
    gsap.from('#finding3-takeaway-text', {x:100, opacity:0 ,scrollTrigger: {
      trigger: '#finding3-takeaway-container',
      start: 'top center'
    }})
  }
  
  function animateFinding4(){
    gsap.from('#stepping-up-chart', {x:-100, opacity:0, scrollTrigger:{
      trigger: '#stepping-up-chart',
      start: 'top center'
    }});
    
    gsap.from('#finding4-takeaway-text', {x:-100, opacity:0, scrollTrigger:{
      trigger: '#finding4-takeway-container',
      start: 'top center'
    }});
    
    gsap.from('#finding4-takeaway-img', {x:100, opacity:0, scrollTrigger:{
      trigger: '#finding4-takeway-container',
      start: 'top center'
    }})
  }
  
  function animateFinding5(){
    
    var staggersX = gsap.utils.wrap(['-100', '100']);
    
    gsap.from('#leaders-confident-container > .leaders-confident-stat', {x:staggersX, opacity:0, stagger:.2, scrollTrigger:{
      trigger: '#leaders-confident-container',
      start: 'top 40%',
      //markers: true
    }})
    
    gsap.from('#leaders-less-confident-container > .leaders-confident-stat', {x:staggersX, opacity:0, stagger:.2, scrollTrigger:{
      trigger:'#leaders-less-confident-container',
      start: 'top 40%',
      //markers: true
    }})
  }
  

  
  //Covid background
  gsap.from('#covid-background', {opacity:0, x:200, scrollTrigger:{
    trigger:'.finding2',
    //markers:true,
    start:'15% center',
    end: 'bottom center',
    //scrub: 1,
    toggleActions: 'play reverse play reverse'
  }});
  
  //Clock background
  gsap.from('#clock-background', {opacity:0, x:200, scrollTrigger:{
    trigger: '.finding3',
    start: '15% center',
    end: 'bottom center',
    toggleActions: 'play reverse play reverse'
  }})
  
  //Footer color change
  gsap.fromTo('.container-outter', {background:'#eee'},{background:'#236192', scrollTrigger: {
      trigger: '.outtro',
      start:'top center',
      end: 'center center',
      scrub: 1,
      //markers: true
    }})
  
  //Footer globe spin
  gsap.to('#svg-globe', {rotate:360, duration:70, repeat:-1, ease:'none'})
  
  globalTL.add(animateIntro())
          .add(animateFinding1(), '<')
          .add(animateFinding2())
          .add(animateFinding3())
          .add(animateFinding4())
          .add(animateFinding5())
  
}

init();

//cleanInit();
              
            
!
999px

Console