How to Take a Full-Page Screenshot of a Webpage with Animated Content

A full-page screenshot captures the whole scrollable webpage, including content beyond the visible browser window. For a manual capture, use Firefox DevTools’ Web Console command :screenshot --fullpage. For repeatable scripted captures, Playwright supports fullPage: true. A screenshot is still an image: Playwright can control CSS animations, transitions, and Web Animations, but its documented animation option does not select a particular GIF or video frame.

Choose a capture state before you save: preserve the page’s current motion state, or suppress supported CSS-based motion for a steadier image. Then inspect the output for the specific content and frame you need.

1. Choose a capture method

Need	Use	What to know
One-off full-page PNG	Firefox DevTools Web Console	Run :screenshot --fullpage; add --filename to choose the output filename.
Repeatable capture in a script	Playwright page screenshot API	Set fullPage: true; configure supported CSS and Web Animations if needed.
One component or region	Playwright locator screenshot or Firefox --selector	Capture the selected element instead of the entire scrollable page.

For a single capture, Firefox avoids writing browser automation code. Playwright is useful when the capture belongs in a repeatable workflow, needs explicit browser setup, or needs post-processing. Full-page capture means the whole scrollable page, not just the current viewport. [Playwright Screenshots] [Firefox Web Console helpers]

2. Capture a full page in Firefox

1. Open the webpage in Firefox.
2. Open the Web Console in Developer Tools.
3. Enter :screenshot --fullpage and run the command.
4. Open the saved PNG and check the full-page content and the animation state.

:screenshot --fullpage

To specify a filename, use the helper’s --filename option. Check the destination before another capture: Mozilla warns that saving to an existing filename overwrites it. The helper also documents --selector for a selected element and --dpr for choosing a device pixel ratio. These are Web Console helper options; do not assume they appear in the ordinary screenshot menu. See the Firefox helper documentation for its syntax.

3. Capture a full page with Playwright

Install Playwright for Node.js, create a script, and run it. This complete example opens a page, captures the whole scrollable document to a PNG, and closes the browser even if capture fails:

import { chromium } from 'playwright';

const browser = await chromium.launch();
try {
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  await page.goto('https://example.com', { waitUntil: 'load' });
  await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
  await browser.close();
}

Save it as capture.mjs and run node capture.mjs. Install the package with npm install playwright; install its browser binaries with npx playwright install chromium. The Playwright screenshot API supports full-page capture and can return image bytes for post-processing instead of writing directly to a file. [Playwright Screenshots]

Choose how CSS animations are handled

By default, the page.screenshot API uses animations: 'allow'. To disable the CSS-based animation behavior Playwright documents for screenshots, use:

await page.screenshot({
  path: 'page.png',
  fullPage: true,
  animations: 'disabled'
});

Playwright documents this setting for CSS animations, CSS transitions, and Web Animations. Finite animations are fast-forwarded to completion. Infinite animations are canceled to their initial state and played over after the screenshot. That does not mean the option chooses a desired frame from an animated GIF or video, or controls every site-specific animation. Also, the default differs between APIs: page.screenshot defaults to allow, while the separate screenshot assertion API documents disabled as its default. [Playwright page screenshot API]

Wait for the page state you need

The example waits for the page’s load event. That is a practical starting point, not proof that every image or below-the-fold section is ready. Sites may render content as you scroll or after client-side work. When the target has a known ready condition, wait for that condition before taking the screenshot. If you need a specific frame from a video or GIF, pause or seek it using the page’s controls where available, then capture and inspect the result. The cited screenshot options do not guarantee a particular media frame.

4. Handle animation and full-page edge cases

• CSS animation or transition: Use animations: 'disabled' for the documented suppression and fast-forward behavior, or leave the default allow to capture the observed state.
• Web Animations: The same documented disabled setting applies. Check the resulting image because finite and infinite animations are handled differently.
• GIF or video: A still screenshot records one state. Pause or seek the media when possible; do not treat the CSS animation option as a frame selector.
• Canvas or custom animation: The documented option does not establish control over every site-specific rendering loop. Set the page to the desired state using the application’s own controls or setup, then inspect the capture.
• Lazy-loaded content: Below-the-fold content may not be present until the page renders it. Inspect the saved image from top to bottom and wait for the relevant content before capture if needed.
• Sticky and fixed elements: Full-page capture changes the capture area beyond the viewport. Check whether fixed elements appear as expected and whether they obscure content.
• Very long pages: The final image can be much taller than the viewport. Confirm that the chosen image format and downstream viewer can handle its dimensions.

These are checks to perform, not claims that every browser or page behaves the same. The research sources document the capture options but do not establish results for every lazy-loading pattern, sticky element, media type, or animation implementation.

5. Troubleshooting

Symptom	Likely cause	What to do
The output shows only the visible viewport	The capture was not made with the full-page option.	In Firefox use :screenshot --fullpage; in Playwright set fullPage: true.
The animation is in an unexpected state	A still image captured one instant, or the page changed during capture.	Decide whether to preserve the observed state or disable supported CSS/Web Animations. For video or GIF, pause or seek first if the page permits it.
A GIF or video still has the wrong frame	The Playwright animation option is not documented as a media-frame selector.	Use the media controls to pause or seek, then capture again and inspect.
Lower sections or images are missing	Content may load only after scrolling or after page scripts run.	Wait for the page’s relevant ready condition, then inspect the full output. If necessary, use the page itself to trigger content loading before capture.
Firefox overwrote an earlier file	The capture reused an existing filename.	Choose a new filename with --filename and verify the destination before running the command.
Playwright reports that the browser executable is missing	The Playwright package is installed without the matching browser binary.	Run npx playwright install chromium and retry.
The screenshot script exits without closing cleanly	An error occurred before browser shutdown.	Put browser.close() in a finally block, as in the runnable example.

6. Performance, reliability, and output cost

Full-page capture includes more pixels than a viewport screenshot, so taller pages produce larger images and may take longer to render and save. Keep the viewport and output size appropriate for the task, and capture a selected element when the whole page is not needed. Reuse a browser process for batches of captures rather than launching a new one for every URL, and always close it after the batch. If you need to compare results reliably, keep the viewport, browser version, page state, and animation setting consistent.

A screenshot captures a point-in-time result and can vary when content, ads, personalization, or animation state changes. For repeatable output, wait for a known page state and inspect the saved file. No benchmark or cost figure is established by the cited documentation; automation cost depends on where and how you run the browser. Avoid assuming a capture succeeded just because a file was written: open it and verify its dimensions and content.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. Make one GET request for a full-page image; its full_page option loads lazy images. See the ScreenshotNeo API documentation for request options and configuration.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d full_page=true \
  -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com", "full_page": "true"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  full_page: 'true'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo, then sign up for 1,000 free screenshots a month with no card.

FAQ

Does a full-page screenshot include content below the fold?

Yes. Full-page capture is intended to include the scrollable page beyond the visible viewport. Firefox documents this for --fullpage, and Playwright describes fullPage: true as capturing the whole scrollable page. [Mozilla] [Playwright]

Can I preserve an animation in a screenshot?

A still image preserves only one visual state. Leave Playwright’s screenshot animation setting at its default allow to avoid the documented disabling behavior, then inspect the captured state. This does not guarantee a chosen frame for video or GIF.

Can Playwright freeze every kind of animated content?

No such guarantee is established by the cited API documentation. Its disabled setting describes CSS animations, CSS transitions, and Web Animations; it does not document selecting a frame from GIFs or videos or controlling every custom rendering mechanism.

Can I capture only one element?

Yes. Playwright supports locator screenshots, and Firefox’s helper documents a --selector option. Use an element capture when the full document is not the subject of the screenshot. [Playwright] [Firefox]