question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

drop animation animates to the wrong rect

See original GitHub issue

https://github.com/clauderic/dnd-kit/blob/dbf95b8d3ad8d4c5bb1740257d6cd44fd6e879fd/packages/core/src/components/DragOverlay/hooks/useDropAnimation.ts#L62

The drop animation should use measuring?.draggable?.measure ?? getTransformAgnosticClientRect from the DnDContext.

I’m implementing a virtualized list and positioning elements using transform, so the position of the rectangles is not transform agnostic. When I pass in measure most things seem to be working but on drop the elements animate to the wrong place. I believe its because of the line I linked but I may be wrong

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
claudericcommented, Apr 14, 2022

Hey @lukesmurray, I’m currently working on refactoring the internals of the drop animation and will get this fixed (essentially making sure that the drop animation uses measuring?.dragOverlay?.measure and measuring?.draggable?.measure)

0reactions
th3fallencommented, Apr 21, 2022

Awesome to hear! i’m running into this as well since the drop takes a second for the data to catch up after (promises) so that’ll be nice

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adobe Animate cc 2020 drag and drop tutorial (HTML5)
In this tutorial, I will show you how to create drag and drop in Adobe Animate.We will be working in HTML5 canvas.you can...
Read more >
UIView animation jumps at beginning - Stack Overflow
I've slowed down the animation duration to 5 seconds but the initial jump is instantaneous and half the transformation in the wrong direction....
Read more >
animation - CSS: Cascading Style Sheets - MDN Web Docs
The animation property is specified as one or more single animations, separated by commas. Each individual animation is specified as: zero, one, ...
Read more >
Animating Shapes — Sample Apps Tutorials - Apple Developer
Learn how to use shapes and simple animations in SwiftUI. First up, you'll learn to use the SwiftUI Shape protocol to create and...
Read more >
Building performant expand & collapse animations
An alternative to animating width and height might be to use the (now-deprecated) clip property to animate the expand and collapse effect. Or, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found