Features: reveal on scroll

What you receive in Webflow

• 30 native elements and 10 classes.
• Breakpoints: mobile landscape (767px), tablet (991px).
• States: hover.
• 2 GSAP animations paste 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="fr">
  <div class="fr-inner">
    <div class="fr-head">
      <span class="fr-kicker">Why teams switch</span>
      <h2 class="fr-title">Everything you need to ship, nothing you don't</h2>
    </div>
    <div class="fr-grid">
      <div class="fr-card"><div class="fr-num">01</div><h3 class="fr-card-title">Instant previews</h3><p class="fr-card-text">Every branch gets its own link, so reviews happen before merge, not after.</p></div>
      <div class="fr-card"><div class="fr-num">02</div><h3 class="fr-card-title">Roll back in one click</h3><p class="fr-card-text">Every release is kept. Go back to any version in seconds when something breaks.</p></div>
      <div class="fr-card"><div class="fr-num">03</div><h3 class="fr-card-title">Edge by default</h3><p class="fr-card-text">Pages are served from 300+ locations, close to every visitor.</p></div>
      <div class="fr-card"><div class="fr-num">04</div><h3 class="fr-card-title">Secrets that stay secret</h3><p class="fr-card-text">Encrypted environment variables, scoped per project and per environment.</p></div>
      <div class="fr-card"><div class="fr-num">05</div><h3 class="fr-card-title">Logs you can search</h3><p class="fr-card-text">Filter by route, status or user. Keep 30 days of history on every plan.</p></div>
      <div class="fr-card"><div class="fr-num">06</div><h3 class="fr-card-title">Built for teams</h3><p class="fr-card-text">Roles, audit trails and SSO, without an enterprise sales call.</p></div>
    </div>
  </div>
</section>
<style>
.fr { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #f8fafc; color: #0f172a; padding: 112px 24px; }
.fr-inner { max-width: 1160px; margin: 0 auto; }
.fr-head { max-width: 640px; margin-bottom: 56px; }
.fr-kicker { display: block; color: #7c3aed; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.fr-title { font-size: 46px; line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
.fr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fr-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 32px; transition: border-color 0.2s ease, transform 0.2s ease; }
.fr-card:hover { border-color: #a78bfa; transform: translateY(-4px); }
.fr-num { font-family: 'Courier New', Courier, monospace; font-size: 14px; font-weight: 700; color: #7c3aed; margin-bottom: 40px; }
.fr-card-title { font-size: 21px; line-height: 1.3; margin: 0 0 10px; }
.fr-card-text { font-size: 16px; line-height: 1.6; color: #475569; margin: 0; }
@media (max-width: 991px) { .fr-grid { grid-template-columns: repeat(2, 1fr); } .fr-title { font-size: 38px; } }
@media (max-width: 767px) { .fr { padding: 80px 20px; } .fr-grid { grid-template-columns: 1fr; } .fr-title { font-size: 32px; } }
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.from(".fr-head", { opacity: 0, y: 30, duration: 0.8, scrollTrigger: { trigger: ".fr", start: "top 80%" } });
gsap.from(".fr-card", { opacity: 0, y: 48, duration: 0.7, stagger: 0.1, scrollTrigger: { trigger: ".fr-grid", start: "top 85%" } });
</script>