Children of <AnimatePresence initial={false}> that have drag enabled start their drag animation with their initial animation styles rather than their animate styles.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
This is a rough POC of a drawer component that can be dragged downwards.
The drag animation should start from the top of the page (set via its animate styles).
Instead, when the drag initiates the drawer jumps to its initial animation styles. This only happens on the first drag. If you drag a second time (which presumably animates it outside of initial={false}), it works as expected. Setting initial={true} also has the drag animation working as expected.
1. Read the FAQs 👇
2. Describe the bug
Children of
<AnimatePresence initial={false}>that havedragenabled start their drag animation with theirinitialanimation styles rather than theiranimatestyles.3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
This is a rough POC of a drawer component that can be dragged downwards.
https://codesandbox.io/p/sandbox/d3493p
4. Steps to reproduce
5. Expected behavior
The drag animation should start from the top of the page (set via its
animatestyles).Instead, when the drag initiates the drawer jumps to its initial animation styles. This only happens on the first drag. If you drag a second time (which presumably animates it outside of
initial={false}), it works as expected. Settinginitial={true}also has the drag animation working as expected.6. Video or screenshots
https://github.com/user-attachments/assets/afc081fc-c6fe-43ea-af7a-6e87d50cd07e
7. Environment details
Mac OS 14.6.1, Chrome 128