Hero: GSAP timeline with stagger

What you receive in Webflow

• 22 native elements and 20 classes.
• Breakpoints: mobile landscape (767px).
• States: hover.
• 1 GSAP animation pastes as Webflow Interactions.
• No Embed elements. Everything is native.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="hg">
  <div class="hg-inner">
    <div class="hg-badge"><span class="hg-dot"></span>Now in public beta</div>
    <h1 class="hg-title">Turn messy data into <span class="hg-accent">clear decisions</span></h1>
    <p class="hg-text">Connect your tools in minutes. Get live dashboards, alerts and weekly reports your whole team can read.</p>
    <div class="hg-actions">
      <a href="#" class="hg-btn">Get started free</a>
      <a href="#" class="hg-btn hg-btn-ghost">Book a demo</a>
    </div>
    <div class="hg-card">
      <div class="hg-card-top"><span></span><span></span><span></span></div>
      <div class="hg-bars">
        <div class="hg-bar" style="height: 42%"></div>
        <div class="hg-bar" style="height: 64%"></div>
        <div class="hg-bar" style="height: 51%"></div>
        <div class="hg-bar" style="height: 78%"></div>
        <div class="hg-bar" style="height: 69%"></div>
        <div class="hg-bar hg-bar-hot" style="height: 92%"></div>
      </div>
    </div>
  </div>
</section>
<style>
.hg { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #052e2b; color: #ecfdf5; padding: 112px 24px 0; overflow: hidden; }
.hg-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.hg-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35); color: #6ee7b7; font-size: 13px; font-weight: 600; margin-bottom: 28px; }
.hg-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
.hg-title { font-size: 68px; line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 22px; }
.hg-accent { color: #34d399; }
.hg-text { font-size: 20px; line-height: 1.55; color: #a7f3d0; max-width: 620px; margin: 0 auto 36px; }
.hg-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }
.hg-btn { background: #34d399; color: #052e2b; padding: 15px 24px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 16px; transition: transform 0.2s ease, background-color 0.2s ease; }
.hg-btn:hover { background: #6ee7b7; transform: translateY(-2px); }
.hg-btn-ghost { background: transparent; color: #ecfdf5; border: 1px solid rgba(236, 253, 245, 0.3); }
.hg-btn-ghost:hover { background: rgba(236, 253, 245, 0.08); }
.hg-card { max-width: 720px; margin: 0 auto; background: #0b3f3a; border: 1px solid rgba(110, 231, 183, 0.2); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 18px 28px 0; }
.hg-card-top { display: flex; gap: 6px; margin-bottom: 28px; }
.hg-card-top span { width: 10px; height: 10px; border-radius: 50%; background: rgba(236, 253, 245, 0.25); }
.hg-bars { height: 220px; display: flex; align-items: flex-end; gap: 18px; }
.hg-bar { flex: 1; background: rgba(52, 211, 153, 0.35); border-radius: 8px 8px 0 0; }
.hg-bar-hot { background: #34d399; }
@media (max-width: 767px) {
  .hg { padding-top: 80px; }
  .hg-title { font-size: 42px; }
  .hg-text { font-size: 17px; }
  .hg-bars { height: 140px; gap: 10px; }
}
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
gsap.timeline()
  .from(".hg-badge", { opacity: 0, y: 16, duration: 0.5 })
  .from(".hg-title", { opacity: 0, y: 40, duration: 0.8 }, "-=0.2")
  .from(".hg-text", { opacity: 0, y: 24, duration: 0.7 }, "-=0.5")
  .from(".hg-actions", { opacity: 0, y: 20, duration: 0.6 }, "-=0.45")
  .from(".hg-card", { opacity: 0, y: 80, duration: 1 }, "-=0.4")
  .from(".hg-bar", { opacity: 0, y: 60, duration: 0.6, stagger: 0.08 }, "-=0.5");
</script>