motiondivision / motiondivision/motion

[BUG] transitionEnd not waiting until end of transition - issue in sandbox from docs

Open
#2,317 5 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.