motiondivision / motiondivision/motion
[BUG] `onDrag` with layout transition not firing closing animation, `onDragEnd` does
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
In version 1 of Framer Motion, onDrag with layoutTransition behaves as expected... once the onDrag function is called the animation completes and the element returns to it's original position.
v1, expected behaviour: https://codesandbox.io/s/framermotion-v1-ondrag-4x2n7j?file=/src/Card.tsx
But in the latest package (10.x) with onDrag the closing animation is not run (it just jumps to the end?) and it moves the element down the page. However, using onDragEnd with the latest package it does do these things again, but obvioulsy the drag needs to be released first, which is not the desired behaviour.
v10.x, current behaviour: https://codesandbox.io/s/framermotion-ondrag-wjlr7r?file=/src/Card.tsx
Every version I tried >= 2.0.0 has strange behaviour with this. As per the changelog at v2 the onDrag had breaking changes.
Am I just missing something with the change, cause it seems like this functionality should still be available, or did something break?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Card.tsx examples linked in the v1 and v10.x CodeSandbox reproductions, comparing the onDrag and onDragEnd handlers and their layoutTransition behavior. Reproduce the issue in the latest package and determine whether onDrag should trigger the closing animation and return the element to its original position without releasing the drag.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100