-
-
Notifications
You must be signed in to change notification settings - Fork 73
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issue with "visible" / "visible-once" variant #143
Comments
Hey @Rene-Roscher, I have the same issue, I initially thought it was a user error but it seems like people are also experiencing this. This issue dates back to September of 2021: #29 It is unfortunate that it hasn't yet been addressed. It is definitely killing this package for me. |
@Tahul I found that this issue is found in chromium based browsers (tested in Google Chrome, Microsoft Edge) but not in Firefox. |
Yes I would love a fix for this as the rest of the package is so good! |
I have the same problem, this bring me to not use this library. |
can you tell me which library you are using instead of this one? |
Does anyone have a temporary solution for this? This is very unfortunate lol.. 😭 |
Facing the same issue here. Works fine on Firefox and Safari, broken on all Chromium-based browsers. Happens when navigating back to any previously visited page. Makes the library virtually useless for me... would be great if anyone has a fix or alternative |
Hey everyone! I've found a temporary solution for this.. Its not ideal, but it works. Let me first post how this should work if the v-motion module behaved as expected: How its suppose to work The following animation should work when the item(s) are in the initial viewport view. However, it does not. Here I have an Note this only works with
Temporary solution After a lot messing around, I found that you can use the
Maybe @Tahul you can take a look at this? This is really the only issue that is stopping this library from being perfect :) Also, @fabienbergerat is correct in that it seems the first solution (how its suppose to work) works fine in Safari and Firefox, but not Chrome. Seems to be a Chrome issue for whatever reason... |
Thanks for this man! You saved my day |
@Tahul Will there be a fix for this or should people just drop this package for others that are maintained? I see this particular issue coming up again and again ever since 2021. If you know where to point me to in order to fix this, i will gladly have a look myself but this issue is a dealbreaker. Original issue: #29 |
i can confirm this, got same problem here |
Yep i can confirm it too. Same problem. |
Same issue. |
Same problem... |
+1 also finding this problematic especially when trying to get animations that work equally well in all screen sizes. |
Here's a slightly more vue-esque variation of your solution @rylanharper
Thanks for the fix! |
Another option would be to use the
|
Yeah, came from framer motion, this works ok at first page load, but if you push router and come back, it doesnt work in chrome. Any more elegant solutions? Because at this point if we need to use a non-declaritve way, i rather use gsap all together :p Im not sure where the issue is either, but let us know if PRs are accepted to fix this? |
This should be resolved by #171, I have tested it locally in some small test projects and it seems to work as expected. Can someone else check to see if it works in existing projects? Curious to hear if it's a complete fix 😅. |
Description:
When using the Vueuse/Motion library, I have encountered an issue with the "visible" / "visible-once" variant. Normally, the element should be immediately visible when it is within the viewport. However, the problem occurs where the element is only displayed when I scroll over the viewport.
Steps to reproduce:
Open the relevant page where the element with the "visible" / "visible-once" variant is used.
Ensure that the viewport directly shows the element without the need for scrolling.
Expected behavior:
The element should be immediately visible when it is within the viewport.
Current behavior:
The element is only displayed when scrolling over the viewport. It appears that the "visible" / "visible-once" variant is not functioning as expected.
Additional information:
Used version of Vueuse/Motion library: 2.0.0
Browser and version used: Brave [Version 1.52.130] (Chromium)
Operating system: Windows 10
Notes:
This issue affects the user experience as the element is not immediately visible when the viewport contains it. It would be desirable for the element to be correctly displayed according to the "visible" / "visible-once" variant, without the need for scrolling.
The text was updated successfully, but these errors were encountered: