To reduce Percy diffs caused by motion, make the page reach its intended state before the snapshot, then disable animations and transitions that are irrelevant to the check. Pause autoplay content, and stabilize changing data with repeatable responses. Keep motion enabled when motion itself is what you are testing.
Find what is changing in the snapshot
Start with the diff and identify the varying region. Percy lists CSS transitions, hover effects, loading skeletons, animated icons, GIFs, auto-rotating banners and autoplay videos as possible sources of inconsistent captures. A snapshot can catch the same animation at a different frame; CSS transitions can cause diffs even if you have disabled keyframe animations. Video frames may also vary with timing, buffering and network conditions. Percy’s false-positive guidance discusses these sources.
Separate motion from other changing state. If text, counts or personalized content differ, animation suppression will not fix the underlying variation. Percy’s visual-testing best practices address stabilizing snapshots and reviewing baselines.
As an Amazon Associate I earn from qualifying purchases.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Make the intended page state ready before capture
Trigger the snapshot only after the state you intend to compare is present. Prefer a meaningful readiness condition to an arbitrary sleep: confirm, for example, that the expected route or component has rendered, the relevant data response has completed, the loading indicator is gone, and required lazy-loaded content is present. Percy’s Testing Library snapshot guidance recommends waiting for the UI to stabilize, including animations and lazy-loaded components.
Use the condition that matches the test. Waiting for the whole network to become idle may be inappropriate on pages with ongoing requests; wait for the relevant data or visible state instead. If the page can still change after that condition, identify and control the source rather than extending a fixed delay.
#1 Best Overall
Disable motion only when it is outside the test
For a snapshot intended to validate static layout or styling, a broad CSS override can be a starting point:
* {
animation: none !important;
transition: none !important;
}This turns off both CSS animations and transitions. A global override can also change a visual state your test is meant to validate, so apply it only to checks where motion is irrelevant. Percy’s false-positive guidance also recommends pausing carousels, stopping auto-rotating sliders and disabling hover effects.
Recommended Free Tools
Rank #2
Do not disable motion in a test whose purpose is to validate animation or a state reached through it. Instead, make that test’s starting conditions and capture point deterministic, and compare the intended resulting state.
Stabilize dynamic content without losing the layout check
If an API-backed component changes between runs, mock its response with repeatable values. The component remains populated, so the snapshot can still catch layout problems. When content is genuinely outside the validation scope, hiding or excluding it may be reasonable; Percy gives live chat, notification badges, counters, rotating banners and ads as examples. Do not mask a region where a layout defect matters.
Choose the narrowest remedy that preserves the purpose of the test:
- Capture timing varies: wait for the intended visible state.
- Visible data varies: mock it with stable values.
- Irrelevant motion varies: disable or pause that motion.
- Nonessential region varies: hide or exclude it only if that region is outside the check.
Check the Percy SDK syntax for your integration
Percy’s published guidance describes snapshot stabilization, but the sources cited here do not establish one current animation setting or configuration syntax for every SDK and version. Check the reference for the SDK and version you use before shipping a Percy-specific configuration snippet.
Percy’s changelog entry “Percy Specific CSS”, dated September 17, 2019, announced Percy-specific CSS as a snapshot option or global SDK configuration. Its historical example hides iframes and says the feature required @percy/agent v0.13.0 or later at that time. That entry is evidence of historical support, not confirmation of present-day syntax or behavior across SDKs.
If the diff persists
- Check non-CSS motion: GIFs, video, canvas, animated SVG, JavaScript-driven animation and CSS pseudo-elements may not be controlled by the CSS override. Identify the actual source before choosing a fix.
- Check pointer and focus state: a different hover or keyboard-focus state can change the capture. Percy identifies hover effects as a possible source; the guidance cited here does not specify a pointer-reset API.
- Control changing content separately: use stable data for API-backed values and control time-dependent content where relevant. Disabling animation does not stabilize changing text or numbers.
- Review the baseline: confirm whether the prior snapshot represents the intended state before approving a change. Percy’s visual-testing guidance recommends controlled baseline review.
- Fix state before loosening comparisons: the cited Percy material supports stabilizing or masking content, but does not establish a numeric tolerance for animation-related diffs.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server; it is an alternative for taking screenshots, not a replacement for configuring Percy’s visual-test snapshots. A GET request returns a screenshot or PDF, and the API accepts common screenshot parameter names.
One-call example (see the ScreenshotNeo API documentation for options):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
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.
