GSAP Pin Scale Section

<div class="gpss-wrap">
  <div class="gpss-spacer"></div>
  <div class="gpss-section" id="gpss-section">
    <h2>Pinned &amp; Scaled</h2>
    <p>Scroll to reveal</p>
  </div>
  <div class="gpss-spacer"></div>
</div>

body { padding: 0 !important; }
.gpss-wrap { width: 100%; }
.gpss-spacer { height: 60vh; }
.gpss-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  color: #e2e8f0;
  text-align: center;
  border-radius: 24px;
  margin: 0 20px;
}
.gpss-section h2 { font-size: 32px; margin: 0 0 8px; }
.gpss-section p { font-size: 14px; opacity: 0.6; margin: 0; }

const section = document.getElementById('gpss-section');
section.style.opacity = '0';
section.style.transform = 'scale(0.8)';
function onScroll() {
  const rect = section.getBoundingClientRect();
  const vh = window.innerHeight;
  const start = vh * 0.8;
  const end = vh * 0.3;
  if (rect.top < start) {
    const progress = Math.min(1, (start - rect.top) / (start - end));
    gsap.set(section, {
      opacity: progress,
      scale: 0.8 + progress * 0.2
    });
  }
}
window.addEventListener('scroll', onScroll);
onScroll();