Animations not completing in Chromium browsers

[cwilvx]

I'm using v-motion animations on a Vue-3 application and the animations are failing on chromium browsers. I've tested my app on Chrome, Vivaldi and Brave and I'm getting the same result. Everything seems to be working fine on Firefox.

For example, the v-motion-slide-visible-left preset does not work on chrome but works fine on firefox.

Firefox

https://user-images.githubusercontent.com/48554537/173181349-14fe2f6a-a9f5-4e9b-94fc-5ed3dbe0796d.mp4

Chrome

https://user-images.githubusercontent.com/48554537/173181364-f0109c58-6bbd-436a-b034-0ef6cace546c.mp4

---

Inspecting the DOM I found that the div with the preset had this style attached to it.

transform: translate3d(-100px, 0px, 0px); opacity: 0;

Why is this happening? How can I fix it?

[Applicafroguy]

Did you find any solution, All nimation work fine in firefox, but in chrome they sometimes work

[JeremyMees]

I also have the same problem the animation doesn't play when te page is loaded only when i scroll down and back up agian

[breizhwave]

Hi, the initial animation does not work on chrome , firefox OK (hero text) https://e1xowy.csb.app/

[JeremyMees]

Hi, the initial animation does not work on chrome , firefox OK (hero text) https://e1xowy.csb.app/

I have the same problem but are you also server side rendering your site? My components that are SSR work perfectly but when i await data in them they break. So i think the animations isn't set correct when the components aren't directly visible for the client

[AntonyZ89]

Same here :(

[BobbieGoede]

This issue is likely fixed by https://github.com/vueuse/motion/pull/171 which is now included in the latest release v2.1.0, but without a reproduction I'm unable to confirm this, can someone check if this issue has been resolved after installing the latest version?

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? A link to a stackblitz project or public GitHub repository would be perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/minimal-reproducible-example)

[github-actions[bot]]

This issue was closed because it was open for 7 days without a reproduction.