Bug: Animations Flash on Print Dialog (cmd + p)

[A-AKB]

Description

When using tailwindcss-motion in my NextJS project, animations behave unexpectedly when opening the print dialog (cmd + p). Instead of being hidden initially, they appear in an unstyled state before animating, causing a buggy flash effect.

Steps to Reproduce

1. Go to a page that includes tailwindcss-motion animations.
2. Press cmd + p to open the print dialog.
3. Observe that animations are momentarily visible in an unintended state before being hidden or animating correctly.

Expected Behavior

Animations should remain hidden initially and should not flash when opening the print dialog.

Actual Behavior

Animations momentarily appear in an unstyled or incorrect state before correcting themselves.

Environment

• Library Version: ^1.1.0
• Browser & Version: Chrome 134.0.6998.166
• Operating System: macOS

Possible Solution

It may be related to how Tailwind’s motion-safe class interacts with print styles. Perhaps forcing opacity: 0 or ensuring animations do not trigger on print could be a workaround.

Additional Context

Let me know if you need a minimal reproduction repo!

[wazeerc]

@A-AKB Please provide a screen recording of the bug.

[A-AKB]

Hi @wazeerc , apologies for the delayed response — I've been quite busy lately.

I've created a screen recording to demonstrate how the animation is intended to behave during a normal page refresh, as well as what happens when I press CMD + P to open the print dialog.

You can view the recording here: https://www.youtube.com/watch?v=sQ6H8X-3G9s
Let me know if you need any additional clarification!

Btw all my dependencies are up-to-date with the latest versions.