Scroll-Driven Hero Templates: 5 Patterns for Scrolling Websites

Disclosure: Scrollhaus publishes this guide and the templates it links to. Browser support notes come from public MDN and Chrome documentation.

What is a scroll-driven hero?

A scroll-driven hero is the first screen of a website whose animation is tied to the scrollbar instead of a timer. As the visitor scrolls, a product turns, a headline assembles, a video scrubs frame by frame or the camera flies through a scene. Scroll back up and it plays in reverse. Because the visitor controls the pace, nothing is missed and the page feels responsive rather than like a video they have to wait for.

Scrolling websites built this way work best when the hero tells one short story in three to five beats, then hands over to normal content.

Five scroll-driven hero patterns

The skeleton every scroll-driven hero shares

Under the visuals, nearly every pattern is the same three parts: a tall runway, a sticky stage and one progress value.

<section class="runway" style="height: 400vh">
  <div class="stage" style="position: sticky; top: 0; height: 100svh">
    <canvas id="hero"></canvas>
    <h1>Your headline stays real text</h1>
  </div>
</section>

<script>
const runway = document.querySelector('.runway')
let target = 0, p = 0
addEventListener('scroll', () => {
  const r = runway.getBoundingClientRect()
  target = Math.min(1, Math.max(0, -r.top / (r.height - innerHeight)))
}, { passive: true })
requestAnimationFrame(function tick() {
  p += (target - p) * 0.12        // smooth, never jumpy
  draw(p)                          // pick a frame, move a camera, set a transform
  requestAnimationFrame(tick)
})
</script>

Runway length sets the pace: roughly 100vh per beat feels deliberate on desktop and still quick on a phone.

Native CSS scroll-driven animations

For simpler heroes you can skip JavaScript. CSS animation-timeline: view() and scroll() are supported in Chromium browsers and Safari 26, so a fade, scale or mask can be bound to scroll directly:

@supports (animation-timeline: view()) {
  .hero-title { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes rise { from { opacity: 0; transform: translateY(40px) } }

Wrap it in @supports so other browsers show the finished state instead of a hidden headline.

Mistakes that make scrolling websites feel broken

• Scroll hijacking. Never replace native scrolling with a fixed-speed animation. Smooth it, as above, or use Lenis, but let the wheel and trackpad stay in charge.
• Hidden headlines. If the H1 only appears halfway through the runway, search engines and impatient visitors may never see it. Show it in the first frame.
• Huge frame sets. 300 full-HD frames is a lot of data. Serve WebP or AVIF, a smaller set on phones, and a poster image for first paint.
• No reduced-motion path. Respect prefers-reduced-motion by jumping to key states instead of scrubbing.

Our scroll animation performance guide covers the measurements in detail.

Using a scroll-driven hero template with AI builders

A scroll animation website builder such as Lovable, Bolt or Claude Code can reproduce these heroes, but only when the prompt describes the runway length, sticky stage, easing and assets precisely. Each Scrollhaus template ships with that build spec: you preview the hero, copy the prompt and the AI rebuilds the same structure in React, TypeScript and Tailwind with your own content.

Want more inspiration? Browse websites with scroll animation or read what a scroll-driven website is.

Explore animated website templates at Scrollhaus →

Need help with a template, account, or project? Email admin@scrollhaus.ai.