chenglou / chenglou/react-motion

Smooth transitions when an element is reparented?

Open
#310 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
21.9k
Forks
1.1k
PR merge metrics
No merged PRs in 30d

Description

Is there any good way to create a smooth transition when an element is reparented (which suddenly changes its base location)?

My use case is basically the same as your "draggable list" demo, except in my case the divs are inside table cells. When the list is reordered, I reparent the draggable `

` elements into a new table cell representing the new order. I do this because there are other table cells next to the draggable ones that update based on what table cells are dragged where.

When this reparenting happens, the `

` would naturally "jump" directly into its new row. I want this jump to be smooth. Say the element used to be in row 1 and now it's in row 2. To smoothly animate this, I need to suddenly subtract 100px from whatever its y transform is currently set to, and I want a smooth animation back to 0.

Any suggestions for this?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the repository's draggable list demo and review how draggable divs are reparented into new table cells. The work is done when an element moved between rows transitions smoothly instead of jumping to its new base location, including the required transform adjustment.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.