motiondivision / motiondivision/motion
[BUG] transitionEnd not waiting until end of transition - issue in sandbox from docs
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
2. Describe the bug
The transitionEnd property inside a Variant causes issues when the animation is cancelled early.
The issue has been introduced in version 10.6.0 and works correctly in 10.5.0 after testing in the sandbox provided below which is based on a sandbox from the documentation for this exact example.
https://codesandbox.io/s/framer-motion-transitionend-forked-xgczyd?file=/src/App.tsx
4. Steps to reproduce
Steps to reproduce the behavior:
The issue arises when using the transitionEnd property inside a variant or the animate property directly.
5. Expected behavior
The expected behavior is exactly what happens in version 10.5.0 where, when interrupting the animation, the transitionEnd is not applied and only is applied when completing or ending the transition successfully.
6. Video or screenshots
If applicable, add a video or screenshots to help explain the bug.
Expected behaviour is as shown in this video:
https://github.com/framer/motion/assets/3082620/1d8c8755-6b9e-4b76-a7a5-71486cafdcd4
The issue is shown below:
https://github.com/framer/motion/assets/3082620/1cd30083-0238-4b4d-b42c-a0c336f8b5dd
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 linked CodeSandbox's src/App.tsx and reproduce the interruption using transitionEnd in a variant or animate property. Compare the behavior between versions 10.5.0 and 10.6.0; done means transitionEnd is applied only after a transition completes successfully, not when it is cancelled early.
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
- Needs clarification
- Newbie friendliness
- 38/100