How exactly does Percy attempt to freeze animations?

[istateside]

Hey folks. We were having issues where a snapshot was showing some visual diffs between different builds, because of an element that animates its position as you click through our app.

I found this page in the Percy docs about animation freezing - https://docs.percy.io/docs/animations#automatic-animation-freezing-in-percy

Percy will automatically:

• Freeze most CSS animation and transition styles.

Can you clarify on this a bit more? How does Percy freeze these styles? And what does "most" mean in this context, how does Percy determine which animations to freeze?

I'm curious why it doesn't seem to be working for us in this instance where an element is using a CSS transition to move between two positions. Was hoping to get some more detail so I can narrow down why it's not working.

(if this isn't the best place to ask general questions about Percy, please let me know where to redirect this - I didn't see a specific repo that would be better suited for this after a quick glance)

[Robdel12]

Hey @istateside! Percy will freeze CSS animations by overriding animation and transition to be none. If the animation is an SVG, that SVGs position/state will be captured when the DOM is cloned (so when the percy snapshot is captured). SVGs don't animate in our browsers, but since the DOM changes between snapshots with these, that can cause flakes too.

The best way to debug these would be to send over a snapshot id and we can look at the snapshot to see what's going on. If any state is encoded in the DOM (inline styles, transform attributes, etc), that will cause diffs since the DOM state is different.

[istateside]

Great, thanks for the help! We'll dig in and see if we can figure out what's happening, but I'll reach out again if we don't get anywhere.

[mspi]

Hello @Robdel12,
I hope it is fine to write to an answered discussion!

Is it possible to overwrite, disable or deactivate the animation: none overwrite? I have one page where this completely trips up the screenshot by showing me an (almost) blank page. I tried to add custom percyCSS to set the animation into the correct state, but cy.percySnapshot overwrites it with animation:none again.