[BUG] SVG briefly appearing on render when it shouldn't based on motion value and variant

1. Read the FAQs 👇 ✅ 2. Describe the bug

Hi 👋 I just upgraded from Motion 1.x to 2.x on one of my repo and noticed that one of my SVGs which can be in 2 different state checked (shows the sun icon) or uncheck (shows the moon icon) sometimes renders both state overlapping for 1 or 2 frames before going to the expected state. It does not happen consistently, only some times, and I really need to repeat several refreshes in order to reproduce the issue

It only happens upon re-rendering the website. I first thought it was due to some race condition on my end, but no, I can reproduce the issue very easily. See CodeSandbox below for a minimal reproduction.

Maybe I’m doing something wrong as well, and I’m misusing useMotionValue and useTransform but from what I;m seeing, these are still set properly.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

See the following code sandbox for a minimal reproduction: https://codesandbox.io/s/frosty-dream-jkkmd?file=/src/App.js

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to the codesandbox above
2. Refresh the codesandbox browser several times
3. See the moon SVG briefly appearing (it shouldn’t as the condition isChecked is set to false in the code)

5. Expected behavior

I’d expect to consistently get 1 of the 2 SVGs to render based on the value of isChecked

6. Video or screenshots

You can see in the recording that the moon icon is briefly appearing for like 1 or 2 frames before disappearing expected state

7. Environment details

macOS Big Sur Chrome/Firefox framer-motion: 2.6.13 react 16.13.0

[tomdohnal]

I only found this pull request https://github.com/framer/motion/pull/857

[mattgperry]

Can’t reproduce in 6