[BUG]: Shared layout animations bug with visibility change

1. Read the FAQs 👇

✅

2. Describe the bug

I'll prefix this with the fact I'm not sure if this is a bug or intended behaviour but I've spent hours searching for a solution and haven't found anything suitable. Anyway...

When using LayoutGroup there is a bug when the elements visibility is toggled. When the element is hidden and then shown again, upon becoming visible, the element randomly animates from a seemingly random location, which looks odd. The initial render is fine and as expected.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

I've replicated the "Share layout animations" example from the docs with a simple hide/show to toggle visibility:
https://codesandbox.io/s/framer-motion-layout-animations-visibility-bug-37wvkh

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/framer-motion-layout-animations-visibility-bug-37wvkh
2. Click on 'Toggle Visibile' twice
3. Observe strange animation of the tab underline

5. Expected behavior

There should be no animation on the element becoming visible again. It should preserve its previous state.

6. Video or screenshots

https://github.com/framer/motion/assets/719092/5720a57a-501f-40ca-bb8a-a6657b529d11

7. Environment details

• macOS 13.5.2 (latest non-beta)
  Observed the issue on:
• Arc 1.7.0 (41350) (latest)
• Safari 17.0 (18616.1.27.101.1, 18616) (beta)
• Firefox 118.0b7 (64-bit) (latest)
• Google Chrome 116.0.5845.179 (Official Build) (arm64) (latest)

Start with the linked CodeSandbox reproduction and the Share layout animations example, then reproduce the issue by toggling visibility twice. The fix is done when the tab underline no longer animates from a random location after becoming visible and preserves its previous state.