[BUG] Setting two different exit values in a single component

[maple146]

1. Read the FAQs 👇
Done.

2. Describe the bug
The project:
I have a home page with two buttons
Each button takes you to a different page while doing a different animation
Button A scrolls you from home/ to /page-a while moving the content up
Button B scrolls you from home/ to /page-b while moving the content bottom
I've created a useState called homeCoords that holds the value that the home component should use on each exit animation
Each button sets a different value for the homeCoords:
ButtonA sets exit={{ y: 1000 }}
ButtonB sets exit={{ y: -1000 }}

The problem:
I'm not able to change the exit property when the buttons are clicked.
It seems like framer motion always uses the default value that is assigned homeCoords.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/github/maple146/framer-motion-transitions

4. Steps to reproduce

Steps to reproduce the behavior:

1. Click on button Component A
2. The transition works correctly, but this is because the exit animation is already set by default (y: 1000)
3. Go back to home
4. Click on button Component B
5. The animation of Component B works correctly, but the exit animation for Home components remains the same as the one set by default, in this case exit={{ y: 1000 }}, but it should be exit={{ y: -1000 }} when the button is clicked.

5. Expected behavior

The exit animation of home should change based on what button is clicked.
I don't know if this is something related to an incompatibility of framer motion with nextjs or if my logic for displaying the components has some kind of error.

6. Video or screenshots

7. Environment details

I'm using Windows 10 and Google Chrome.

FAQs

"use client" error

We would accept a PR implementing "use client" (see previous discussion). In the meantime a workaround is:

// motion.js
"use client"
export * from "framer-motion"

// other.js
import { motion } from "./motion"

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.

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>

[mattgperry]

This is because you've removed the component from the DOM so it won't receive the latest state.

We added custom prop to AnimatePresence to get around this: https://www.framer.com/motion/animate-presence/###custom