motiondivision / motiondivision/motion

[BUG] Scroll reset on layout animation

Open
#2,385 2 comments 0 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

I try to do a layout animation when I reorder a grid of elements. But for some unknown reasons when I reorder the list sometimes the scroll reset to the top of the page.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codepen.io/JAWStm/pen/ExrjQZj?editors=0011

When you click an element it will make it go the the begining of the list. And the bug will appear.

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Create a grid with some items
  2. Reorder the list using logic or random sort
  3. The scroll will be reset

5. Expected behavior

The scroll should stay at the same position every time.

6. Video or screenshots

No Video

7. Environment details

OS: Windows 10
Browser: Chrome

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 by running the linked CodePen reproduction in Chrome and inspect the layout-animation path used when an item moves to the beginning of the list. Compare the scroll position before and after reordering, then verify that the page remains at the same position across repeated reorder operations.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.