Playwright Screenshots with Scroll-Triggered Animations

Problem

When taking full-page screenshots with Playwright, sections using Framer Motion's whileInView (or any IntersectionObserver-based animation) appear blank/invisible. Elements start with initial="hidden" (opacity: 0, y: 40, etc.) and never animate to visible because Playwright's fullPage: true screenshot captures the DOM without triggering scroll-based intersection events.

Context / Trigger Conditions

• Playwright page.screenshot({ fullPage: true }) produces images with blank sections
• Elements use Framer Motion whileInView, initial="hidden", or variants with viewport triggers
• Content exists in the DOM (verified via page.$()) but isVisible() may return true while opacity is 0
• Sections appear fine in a real browser when scrolled manually
• Also affects GSAP ScrollTrigger, vanilla IntersectionObserver, and CSS scroll-timeline animations

Solution

Before taking screenshots, scroll through the entire page to trigger all animations: