Waiting before screenshot

[JavierM42]

We are having issues with components that have mount animations. Since we don't know how to wait for them to finish, our screenshots are slightly different every time.

Is it possible to solve it with beforeScreenshot?

[fwouts]

Hi @JavierM42, what kind of animations are you dealing with? If they're CSS, I'd recommend importing an extra CSS file that disables them. If you can share a code sample, that'd be appreciated!

[JavierM42]

We're using Framer Motion.

If you try to screenshot something like this, the resulting screenshot never gets the same opacity.

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 1 }} // optional, default value is enough for it to be a problem
>
  Something
</motion.div>

We could add an environment variable to conditionally set duration: 0, but we'd have to do that on every animated component and pollute the codebase with specific behavior that's only for screenshots.

I guess that a better solution would be to add a delay before taking the screenshot, but I'm not sure if/how we can do that with Viteshot.

[fwouts]

Cheers for the extra context.

I can think of a couple of approaches:

• add a Wrapper component that disables Framer Motion animations entirely: see https://www.framer.com/docs/motion-config/ (always option) and https://viteshot.com/docs/config/wrapper
• use await new Promise(resolve => setTimeout(resolve, 2000)) in beforeScreenshot for each component that needs it

If it works, the former would be better as it won't slow down your screenshots and wouldn't require extra boilerplate.

Let me know how you go.

[JavierM42]

I tried the motion config yesterday, it only stops transforms that actually move elements (translateX, translateY, rotate, ...), opacity isn't affected.

I'll try the timeout tomorrow and get back to you, thanks!

[JavierM42]

Timeout works great! Thanks a lot @fwouts

Awesome tool btw 🎉, I even wrote a blog post about it. It's been a massive improvement to our workflow.

[fwouts]

Awesome @JavierM42, thanks for the article!

I wonder if you've seen the -p flag? It should hopefully be able to replace your git-auto-commit-action step :)