[BUG] Framer Motion Animation doesn't work on reload without delay

[KonerDev]

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 with CTRL + 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:

1. Open https://stackblitz.com/edit/vitejs-vite-cbkvjz?file=src%2FApp.jsx&terminal=dev
   and then https://vitejsvitecbkvjz-evfn--5173--d0228c83.local-credentialless.webcontainer.io (the second url is just the fullscreen version)
2. In the second url click on connect project after a few seconds
3. Press CTRL + R or click on the reload button of your browser
4. The animation doesn't really work

If you press CTRL + SHIFT + R, the animation will work fine.

5. 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

[mikirejf]

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.

[KonerDev]

It's very difficult to reproduce the problem, but I just use a delay of 0.25, which at least temporarily solves the problem

[mattgperry]

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.

[mikirejf]

For me it's also happening in FF and Safari.

These are my motion props:

initial={{ transform: 'scale(0)', opacity: 0.8 }}
animate={{ transform: 'scale(1)', opacity: [0.8, 1, 1, 0] }}
transition={{
  transform: { delay: 0.3, type: 'spring', stiffness: 300, damping: 15 },
  opacity: {
    delay: 0.3,
    duration: 2.2,
    times: [0, 0.13, 0.95, 1],
    ease: 'easeInOut',
  },
}}

Until 11.0.10, the element would at least appear in the DOM (without scale animating), and onUpdate was firing.

Starting with 11.0.11, onUpdate isn't firing at all.

[mattgperry]

Ahh ok thanks for the additional info - I'll take a look

[KonerDev]

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.

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