Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Puppeteer does not document a built-in screenshot option that disables animations. Prepare the page before calling page.screenshot(): emulate reduced motion if you want to test the site’s response to that preference, inject CSS to suppress CSS animations and transitions for a capture, or use the Web Animations API when you need to control active animation objects.
Why a Puppeteer screenshot can catch motion mid-frame
page.screenshot() captures the page as it is rendered at that point in time. If a transition or animation is still changing the page, the captured image can show an intermediate state. Puppeteer’s documented screenshot options do not include an animations switch, so the reliable approach is to prepare the page before taking the screenshot.
The examples below use the Puppeteer page object named page. Run the chosen preparation code after navigation and after any application-specific setup, but before the screenshot call.
Recommended Free Tools
Choose how to control motion
| Goal | Approach | Limitation |
|---|---|---|
| Test the page’s reduced-motion behavior | Emulate prefers-reduced-motion: reduce |
The page must respond to that preference. |
| Suppress CSS animations and transitions in the capture | Inject a temporary CSS override | Does not stop JavaScript from changing the DOM or styles. |
| Seek active animation objects to their end | Use document.getAnimations() and guarded finish() calls |
Infinite animations and some playback states cannot be finished; the end state may not be the desired screenshot. |
Option 1: emulate reduced motion
Use this when you want to capture or test the page as it responds to a visitor’s reduced-motion preference. Puppeteer’s media-feature emulation changes the preference exposed to the page; it does not independently turn off every animation.
#1 Best Overall
await page.emulateMediaFeatures([
{ name: 'prefers-reduced-motion', value: 'reduce' },
]);
await page.screenshot({ path: 'capture.png' });This works only if the site has CSS or JavaScript that honors prefers-reduced-motion. For example, the site may use a media query to reduce or remove motion. If it does not respond to the preference, the screenshot can still contain animation.
Option 2: suppress CSS animations and transitions
For a capture that should not show CSS-driven motion, add a temporary style element before taking the screenshot. The override disables CSS animations and transitions and prevents smooth scrolling from affecting the capture.
await page.evaluate(() => {
const style = document.createElement('style');
style.dataset.screenshotMotionOverride = 'true';
style.textContent = `
*, *::before, *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
`;
document.head.append(style);
});
await page.screenshot({ path: 'capture.png' });Adding the style through page.evaluate() makes this a page-side override, not a Puppeteer screenshot setting. !important helps it override ordinary author styles. Check the actual target page: application code may continue updating the DOM or inline styles, and not all rendering behavior is controlled by CSS animations or transitions.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Option 3: inspect or finish active animations
Use the Web Animations API when you need to inspect active animation objects or deliberately seek finite animations to their end. document.getAnimations() includes CSS animations, CSS transitions, and Web Animations.
Rank #3
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
await page.evaluate(() => {
for (const animation of document.getAnimations()) {
try {
animation.finish();
} catch {
// Infinite animations and other invalid finish states need a separate policy.
}
}
});
await page.screenshot({ path: 'capture.png' });finish() seeks an animation to its end in its playback direction. It can throw when the animation has an infinite end time or a playback rate of zero. Catching the error prevents one such animation from aborting the loop, but it does not resolve the visual policy for that animation. For looping motion, decide whether to cancel it, suppress it with CSS, or set a known state instead of assuming that finishing every animation is safe.
Use the method that matches the screenshot you need
- Validate accessibility behavior: emulate reduced motion and confirm the site actually responds to the preference.
- Get a still capture without CSS motion: inject the CSS override before capture, then check for application-driven updates that it cannot freeze.
- Capture an intentional animation end state: inspect animation objects and finish only those whose end state is appropriate; handle infinite or invalid states separately.
Troubleshooting
The screenshot still shows motion after reduced-motion emulation
The emulated preference does not force a site to change. Confirm the page uses a reduced-motion media query or JavaScript check, or use the CSS override when the goal is simply to suppress CSS motion for the screenshot.
Rank #4
The CSS override does not produce a stable image
The override targets CSS animations, transitions, and smooth scrolling. It does not freeze application code that changes content, DOM structure, or inline styles. Identify the page update that is still occurring and wait for or control that state before capture.
finish() throws
An animation may have an infinite end time or a playback rate of zero. Guard each call, as in the example, and choose an explicit policy for animations that cannot be finished—such as suppressing them with CSS or placing the page in a known state.
Best Value
Code copied from another browser automation library uses an animation option
Do not assume an option from another library exists in Puppeteer. Check the screenshot API for the Puppeteer version installed in your project; the API reference search result identifies version 25.12.0, while the reduced-motion method example is from Puppeteer’s /next/ documentation and should be checked against the installed version.
Or skip the browser setup
For a hosted screenshot instead of managing a Puppeteer browser, ScreenshotNeo accepts a URL in one GET request and returns a screenshot or PDF. This call captures the supplied page; it does not promise to freeze animations.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan.
Version note
Puppeteer documentation can change, and the reduced-motion example is from its /next/ documentation. Verify the methods and screenshot options against the Puppeteer version in your project before relying on version-specific behavior.
Frequently Asked Questions
Does the CSS override change the website permanently?
No. The example adds a style element to the page instance used for the capture; it does not edit the site’s source files.
Can Puppeteer make every kind of page update stop?
These approaches address the page’s motion preference, CSS animation and transition rules, or Web Animations API objects. They do not provide a universal freeze for arbitrary application code.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute
