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
[BUG] Framer Motion Animation doesn't work on reload without delay #2598
Comments
I'm observing something similar in our app. An animation plays if a route is freshly loaded, but sometimes won't play if I navigate between the route and some other route. Will provide more information when I dig deeper. Sadly, I can't manage to reproduce it in a sandbox. |
It's very difficult to reproduce the problem, but I just use a delay of 0.25, which at least temporarily solves the problem |
My suspicion is that this is a bug in Chrome - specifically this one https://issues.chromium.org/issues/40887505 If you put an onUpdate on the animations you'll see the frames do fire, Chrome doesn't paint them. |
For me it's also happening in FF and Safari. These are my motion props:
Until Starting with |
Ahh ok thanks for the additional info - I'll take a look |
Yes, that seems to be exactly my issue. Is there anything I can do to solve the problem temporarily other than a delay of 0.25 as it's not a nice solution to the problem. Is it possible to check whether the object has been painted and then start the animation? EDIT: The error does not occur in Firefox |
1. Read the FAQs π
β
2. Describe the bug
If I have two components that should be animated as soon as they are visible, they will not be animated when I reload the page with
CTRL + R
. Only when I reload the page withCTRL + SHIFT + R
the animation appears.3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
Unfortunately I couldn't reproduce the bug in CodeSandbox because the reload mechanism seems to work differently there, but the bug is also there in Stackblitz.
https://stackblitz.com/edit/vitejs-vite-cbkvjz?file=src%2FApp.jsx&terminal=dev
4. Steps to reproduce
Steps to reproduce the behavior:
and then https://vitejsvitecbkvjz-evfn--5173--d0228c83.local-credentialless.webcontainer.io (the second url is just the fullscreen version)
CTRL + R
or click on the reload button of your browser5. Expected behavior
When I reload the page the animation should run normally, even without shift.
6. Video or screenshots
---
7. Environment details
Windows 11 23H2; Chrome 123.0.6312.59
The text was updated successfully, but these errors were encountered: