playwright-whileinview-screenshots
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", orvariantswith viewport triggers - Content exists in the DOM (verified via
page.$()) butisVisible()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-timelineanimations
Solution
Before taking screenshots, scroll through the entire page to trigger all animations:
More from hubeiqiao/skills
apple-bento-grid
|
2pptx
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
1responsive-video-source-selection
|
1coding-standards
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
1docx
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
1internal-comms
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
1