[BUG] State updates still interrupting layout animations

[rijk]

Describe the bug

This was reported in #732 and fixed in #1018 (v3.10.1), but it seems there still is an issue.

CodeSandbox reproduction of the bug

https://codesandbox.io/s/9eh9p?file=/src/Modal.tsx

Steps to reproduce

Steps to reproduce the behavior:

1. Click on a blue square
2. ☑️ Open animation no longer interrupted by state updates
3. Close modal
4. ❌ Close animation is interrupted by state update, comment icon seems to start new animation with default transition, border radius does not return to 10:

Screen.Recording.2021-04-02.at.10.48.02.mov

Expected behavior

Comment out the useEffect in Modal.tsx to see the expected behaviour:

Screen.Recording.2021-04-02.at.10.47.17.mov

[rijk]

Update: while debugging I found out that this only happens when the element that is animating out (the modal in my example) does not have an exit prop. So it can be fixed for now by adding something like exit={{ opacity: 1 }} to the element. Not sure if this is by design (@mattgperry?), but I'll submit a PR to change this because I think it's very unintuitive in either case.

[rijk]

What actually happens is on the state update of the child that is being exited, the transition switches to that of the following child. In this example you see the transition actually becoming slower instead of faster: https://codesandbox.io/s/framer-motion-state-update-during-layout-transition-issue-9eh9p?file=/src/Test.tsx

[rijk]

Fixed in 4.1.18-rc.26 (Sandbox), but broken again on 5.0.0-beta.22 (Sandbox):

Screen.Recording.2021-08-30.at.11.56.35.mov

Edit: still happens on rc.1: https://codesandbox.io/s/framer-motion-state-update-during-layout-transition-issue-on-v5-0-0-rc-1-kqf50?file=/package.json

[rijk]

Here's another issue: https://codesandbox.io/s/framer-motion-v5-5-0-layout-animation-reset-on-state-update-76l4n

Screen.Recording.2021-09-06.at.14.38.58.mov

Note that the lead element is reset to its starting position on a React state update.

[rijk]

On 5.0.0-rc.1 we are getting even funkier behaviour:

Screen.Recording.2021-10-23.at.18.31.34.mov

[rijk]

Here is a more minimal reproduction without Portal: https://codesandbox.io/s/framer-motion-v5-0-0-layout-transition-funkiness-lbfff?file=/src/App.tsx

To see the working as intended behaviour, comment out the useEffect in Modal.tsx to disable the internal state updates.

---

Also the original issue still happens on rc.1: https://codesandbox.io/s/framer-motion-state-update-during-layout-transition-issue-on-v5-0-0-rc-1-kqf50?file=/package.json

[trurl-master]

I stumbled upon a similar problem, here's another (a little bit smaller) reproduction that may be relevant - https://codesandbox.io/s/framer-rerender-issue-1cmcf

5.3.3 - the non-memoized version of the component is very jittery
4.1.18-rc.26 - works perfectly
4.1.18-rc.25 and down (including 4.1.17) - not jittery, but onLayoutAnimationCallback fires on every render

Screen.Recording.2021-11-25.at.23.22.50.mov

[mattgperry]

It's also preferable to add layoutDependency to these elements as they will skip being measured entirely.