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.

Glitchy animation when dropping item

See original GitHub issue

Hi, I am experiencing a weird animation when sorting a list of elements. I cannot provide the exact codebase, but I have built it on top of the story presets > sortable > multiple containers > many items.

Here below you can see a video of the problem. Notice how the<DragOverlay /> falls correctly into place, while the remaining elements shifts up in a weird way.

I have spent quite some time trying to track down the problem, but with no result so far. Anybody has idea of what could be the cause?


Issue Analytics

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

github_iconTop GitHub Comments

claudericcommented, May 30, 2022

@MTxx87 the problem in your case is that you are not using a stable key property. You are passing the index as the key property to your list items, which causes them to unmount and re-mount when the order of the list changes.

Use the unique id property of your items instead as the key:

You can read more about using stable keys here:

MTxx87commented, May 30, 2022

@clauderic It worked when adding the proper key. Thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Visual bug on drop #2086 - atlassian/react-beautiful-dnd
Actual behavior. After dropping a draggable element, there is a visual bug as shown in the following GIF.
Read more >
How to create high-performance CSS animations -
This guide teaches you how to create high-performance CSS animations. See Why are some animations slow? to learn the theory behind these ...
Read more >
Animation Techniques for Adding and Removing Items From a ...
Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do.
Read more >
An Interactive Guide to CSS Transitions - Josh W Comeau
When we animate an element using transform and opacity , the browser will sometimes try to optimize this animation. Instead of rasterizing the ......
Read more >
How to Create a Glitch Effect in After Effects - School of Motion
So in today's tutorial, we are going to make this glitch effect that you can set up once and then drop over any...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found