Motion: [BUG] layout animation stuttering when the parent component's state is updated

[ttillberg]

2. Describe the bug

Updating the state of a component containing a layout element during a transition causes the animation to stutter.

Observations:

• Testing the bug against different versions of framer-motion it seems the issue appeared between 2.4.3 and 2.5.0.
• The bug doesn't occur with simple animate etc. only layoutId and layout elements

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/vigilant-murdock-wri5r?file=/src/App.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/vigilant-murdock-wri5r?file=/src/App.tsx
2. Observe the animation is stuttering (pausing shortly every 250ms when the state gets updated )
3. Downgrade to framer-motion 2.4.3 to observe a fluid animation as expected

5. Expected behavior

Changing the state or re-rendering the parent component of a motion component shouldn't affect the animations of the latter

6. Video or screenshots

7. Environment details

Chrome 85, Safari 13, Firefox OSX

[mattgperry]

It looks like the logic around when we start a new layout animation changed around then. I'll take a look.