[BUG]: Shared layout animations bug with visibility change
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 38/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react, typescript
- Domain
- frontend
Research direction
Start with the linked CodeSandbox reproduction and the Share layout animations example, then reproduce the issue by toggling visibility twice. The fix is done when the tab underline no longer animates from a random location after becoming visible and preserves its previous state.
Written by the indexing model from the issue text.
Description
1. Read the FAQs 👇
✅
2. Describe the bug
I'll prefix this with the fact I'm not sure if this is a bug or intended behaviour but I've spent hours searching for a solution and haven't found anything suitable. Anyway...
When using LayoutGroup there is a bug when the elements visibility is toggled. When the element is hidden and then shown again, upon becoming visible, the element randomly animates from a seemingly random location, which looks odd. The initial render is fine and as expected.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
I've replicated the "Share layout animations" example from the docs with a simple hide/show to toggle visibility:
https://codesandbox.io/s/framer-motion-layout-animations-visibility-bug-37wvkh
4. Steps to reproduce
Steps to reproduce the behavior:
- Go to https://codesandbox.io/s/framer-motion-layout-animations-visibility-bug-37wvkh
- Click on 'Toggle Visibile' twice
- Observe strange animation of the tab underline
5. Expected behavior
There should be no animation on the element becoming visible again. It should preserve its previous state.
6. Video or screenshots
https://github.com/framer/motion/assets/719092/5720a57a-501f-40ca-bb8a-a6657b529d11
7. Environment details
- macOS 13.5.2 (latest non-beta)
Observed the issue on: - Arc 1.7.0 (41350) (latest)
- Safari 17.0 (18616.1.27.101.1, 18616) (beta)
- Firefox 118.0b7 (64-bit) (latest)
- Google Chrome 116.0.5845.179 (Official Build) (arm64) (latest)
- Dominant language
- TypeScript
- Stars
- 34.4k
- Forks
- 1.4k
- Avg merge
- 21h 40m
- Merged PRs (30d)
- 125
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing 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.
More from motiondivision/motion
-
[FEATURE] AnimateSuspense for transitions between suspense fallbacks and streamed contentMay be free again A pull request for this issue was closed without being merged. Openfeature
Difficulty 5/5 Over a week Newbie friendliness 35/100
motiondivision/motion#3173 · 9 reactions ·
Maintainers usually reply within 1 day
-
bug
Difficulty 4/5 3-5 days Newbie friendliness 35/100
motiondivision/motion#2662 · 2 comments · 4 reactions ·
Maintainers usually reply within 1 day
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 35/100
motiondivision/motion#2546 · 4 comments · 1 reaction ·
Maintainers usually reply within 1 day
-
[FEATURE] Manually update animations without `requestAnimationFrame`Possibly taken A pull request linked to this issue is open or already merged. Openfeature
Difficulty 5/5 Over a week Newbie friendliness 30/100
motiondivision/motion#2496 · 2 comments · 3 reactions ·
Maintainers usually reply within 1 day
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 35/100
motiondivision/motion#2369 ·
Maintainers usually reply within 1 day
All issues in motiondivision/motion
Similar issues
-
area:agent-view area:tui bug platform:macos
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
anthropics/claude-code#104558 ·
Maintainers usually reply within 1 day
-
updater
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
UniversityOfHelsinkiCS/oodikone#5141 ·
-
maintanance
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
inmanta/web-console#7606 ·
Maintainers usually reply within 1 day
-
bug skills
Difficulty 2/5 1-3 hours Newbie friendliness 77/100
equinor/fusion-framework#5846 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 74/100