Animations

Chromatic proactively pauses CSS animations/transitions, SVG animations, and videos to prevent false positives. We do this because multiple variables outside of our control make it impossible to guarantee consistent animation painting down to the millisecond.

CSS animations

Chromatic will pause CSS animations and reset them to their beginning state.

Some animations are used to “animate in” visible elements. To specify that Chromatic should pause the animation at the end, use the pauseAnimationAtEnd story parameter:

import MyComponent from './MyComponent';

export default {
  component: MyComponent,
};

export const StoryName = () => <MyComponent />;

StoryName.story = {
  parameters: {
    chromatic: { pauseAnimationAtEnd: true },
  },
};

You can use Storybook’s parameter inheritance if you want to set the behaviour for your entire app:

// In .storybook/config.js
import { addParameters } from '@storybook/react';

// This will apply the behaviour to all stories in your Storybook
addParameters({ chromatic: { pauseAnimationAtEnd: true } });

JavaScript animations

Chromatic cannot disable JavaScript driven animations, so we advise disabling such animations manually for Chromatic builds. One way to do that is using isChromatic():

// In .storybook/config.js
import isChromatic from 'chromatic/isChromatic';

if (isChromatic()) {
  // The exact method to do this will depend on your animation techniques.
  AnimationLibrary.disable = true;
}

Animations that cannot be disabled

If you cannot disable animations (for example if disabling JS animations is difficult), you can use a delay to allow the animation to complete before taking the snapshot.

Alternatively, ignore an element to omit a visible area of your component when comparing snapshots.