Percy Developer Hub

Welcome to the Percy Developer Hub. You'll find comprehensive guides and documentation to help you start working with Percy as quickly as possible, as well as support if you get stuck. Let's jump right in!

Freezing animations

Covered in this doc

The challenge of animations in visual testing
How Percy automatically freezes CSS animations and GIFs
Freezing jQuery, Highcharts, and Velocity animations

A big challenge of visual testing is reducing false-positive visual diffs. False-positives can be caused by many variables (including system and hardware differences between browser environments), but are commonly caused by page animations.

For example, take this awesome pure-CSS animation:

See the Pen Submarine with CSS by Mike Fotinakis (@fotinakis) on CodePen.

If you captured a page with this animation multiple times, you would end up with noisy and false-positive visual diffs:

Though fun to look at, this doesn't really help us identify visual regressions!

Automatic animation freezing in Percy


Percy does a lot of work behind the scenes to make sure that pages are rendered consistently and deterministically. One of the things we do is freeze different kinds of animations that can cause false-positive visual diffs.

Percy will automatically:

  • Freeze animated GIFs on the first frame.
  • Freeze most CSS animation and transition styles.

Other than animations, Percy does other server-side tricks to create a consistent rendering environment and avoid other kinds of false-positives (such as font rendering differences, sub-pixel antialiasing, width and height changes, etc.)

Freezing other animations


jQuery animation handling

Percy does not by default execute JavaScript in our rendering pipeline, but JavaScript is likely enabled in the browser that runs your acceptance tests locally or on CI. You might be unknowingly running jQuery animations in tests simply by using them in your app.

In addition to causing false-positives if the DOM is captured in the middle of animation, jQuery animations can also have the adverse effect of slowing down your acceptance tests---assertions might wait for animations to complete before an element exists on the page. Temporarily disabling jQuery animations might help speed up your acceptance tests, as well as will help Percy avoid capturing the DOM state while elements are still animating.

You can set a jQuery config to disable animations:

$.fx.off = true;

NOTE: You should only include this snippet in your testing environment!

As the jQuery docs say: "When this property is set to true all animation methods will immediately set elements to their final state when called, rather than displaying an effect."

Freeze Highcharts animations

Highcharts.setOptions({
  chart: {
    animation: false
  },
  plotOptions: {
    series: {
      animation: false
    }
  }
});

Velocity animation handling

If you are using the Velocity animation accelerator, you can mock time when animating elements to disable the animation tweening entirely. This allows you to snapshot the end state of your animation. To do so, add the following to your Velocity config to disable animations:

$.Velocity.mock = true;

This will force all Velocity animations to run with 0ms duration and 0ms delay on the next animation tick. For more information on how this works, see the Velocity documentation

Pausing Greensock animations

Greensock is relies on requestAnimationFrame under the hood. If you use TweenMax you can set the globalTimeScale to 0 in your test environment to pause animations on all timelines:

TweenMax.globalTimeScale(0)

TimelineLite also has a way to adjust time scale via exportRoot

Updated 5 months ago

Freezing animations


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.