[BUG] AnimatePresence - first exit animation is stale

[sarimabbas]

1. Read the FAQs 👇

I read through the FAQs and checked my code. I also looked at other GitHub issues but was unable to find a resolution.

2. Describe the bug

Hello! Thank you for your work on this library.

I am building a version of a slider/carousel, where multiple items flow in and out of the page in a staggered way. I am using AnimatePresence and dynamic variants to stagger the animation and also change the direction of the entry/exit. This is very similar to an example video posted here. I noticed that the exit animation direction seems to be stale. The very first time the slider direction changes, the exit animation does not change and goes in an unexpected, reverse direction. Is there a way to keep it up to date? Below, you can observe the behavior every time the direction changes:

CleanShot.2022-08-27.at.23.03.11.mp4

In the example I linked above, as well as in the official example, the solution was to also set custom on AnimatePresence itself. However, it seems like AnimatePresence overrides/sets custom for its children too, but then I can no longer use idx to stagger the children.

I would appreciate your help/advice. Thank you!

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-animate-presence-github-issue-wts96c?file=/src/App.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to the codesandbox
2. move the slider one step to the right. observe that the exit animation goes in reverse
3. move the slider to the right. everything works
4. change the direction on the slider, the exit animation goes in the reverse direction again

5. Expected behavior

I expect that the exit animation will be in lockstep with the slider direction.

6. Video or screenshots

Already attached to the top of this issue.

7. Environment details

If applicable, let us know which OS, browser, browser version etc you're using.

• OS: macOS 13.0 Beta
• Browser: Google Chrome, Version 104.0.5112.101 (Official Build) (arm64)

FAQs

Framer Motion won't install

Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.

height: "auto" is jumping

Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.

The recommended solution is to move padding to a child element. See this issue for the full discussion.

Type error with AnimateSharedLayout

AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
  {items.map((item, index) => <Component key={index} />)}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
  {items.map((item, index) => <Component key={item.id} />)}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{isVisible && (
  <AnimatePresence>
    <Component />
  </AnimatePresence>
)}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>
  {isVisible && <Component />}
</AnimatePresence>