Open JavierM42 opened 2 years ago
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!
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.
Cheers for the extra context.
I can think of a couple of approaches:
always
option) and https://viteshot.com/docs/config/wrapperawait new Promise(resolve => setTimeout(resolve, 2000))
in beforeScreenshot
for each component that needs itIf 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.
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!
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.
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 :)
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
?