Split-Screen Editorial Hero

What this builds

A full-viewport hero divided into two asymmetric panels. One panel holds a full-bleed image (or video) that either stays fixed or scrolls at a slower rate. The other panel holds editorial content (headline, body, metadata) that scrolls independently or at a faster rate. The split ratio is intentionally uneven (60/40 or 65/35) to create editorial tension. The two panels can have independent scroll containers, or one panel pins while the other scrolls via GSAP ScrollTrigger.

• Two-panel layout with configurable split ratio (default 60/40, image panel larger).
• Image panel either pins in place or scrolls at a reduced rate (parallax factor 0.3-0.5x).
• Content panel scrolls at full speed, revealing editorial content as the user progresses.
• Clean divider line or overlap zone between panels, not a hard 50/50 split.
• Responsive collapse to stacked layout below 768px.
• Scroll-linked reveal animations on the content panel (staggered type, metadata fade).

When to use / when not to

• Use when the design calls for editorial tension between a hero image and substantial text content (more than a headline and CTA).
• Use for portfolio case study openers, magazine-style article headers, or product detail pages where the product image and specifications need equal visual weight.
• Do NOT use for text-minimal heroes. If the content panel holds only a headline and a button, the split is wasted space. See hero-minimal-swiss-type instead.
• Do NOT use when the image is the sole focus. See hero-liquid-distortion-image for image-forward heroes.
• Do NOT use for three-or-more panel layouts. This is a two-panel split. For grid-based hero layouts, see bento-grid-layouts.
• If you need pinned scrollytelling sections (not just a hero), see sticky-pinning-sequences.