Animating add/delete items

[ranbena]

I'm using dnd-kit in my project which allows to delete / add items to a draggable list.
Currently, updating items dynamically results in an instant update to the item list.
But, I'd like these mutations to be animated. Here's a demonstration.

Deleting an item would animate the items below upwards:

Screen.Recording.2021-02-28.at.12.54.33.mov

Adding an item would animate the items below downwards:

Screen.Recording.2021-02-28.at.13.06.45.mov

I dove into the code but am unsure how to approach this. Would appreciate some guidance on how this could be accomplished @clauderic.

[ranbena]

If I understand correctly, enabling the transition is not enough, because it must be paired with an appropriate transform.
And I'm unsure how to calculate this transform, which expects a "from" node and a "to" rect which don't necessarily exist.

[clauderic]

Hey @ranbena, could you try your use-case against this PR and let me know if works for your use-case? #144

[ranbena]

Hey @clauderic, #144 is awesome. Adding and removing single items works amazing.

My use-case calls for removing multiple items at once and it works well BUT not with a virtualized list, bc newly rendered items appear on screen without the layout animation.

For example: In 5-Virtualized.story, the sortable displays 10 items + 3 bottom overscanned items. Removing 6 items at once, result in 3 items animating upwards while the remaining 3 items appear abruptly.

One way to mitigate this is to set overscanCount={6} before filtering the items - that fixes it, but it'a not ideal for performance.
Is there any adjustment that can be done in useSortable or useDerivedTransform to accommodate this use-case?

[clauderic]

Layout animations in useSortable have a requirement that the component be mounted while its index changes. Virtualization breaks this assumption for the newly mounted elements.

I honestly don't think there's an elegant solution to orchestrate this from @dnd-kit alone. As you mentioned, the workaround would be to make sure there are enough overscan items to allow for the items to be mounted before their indices change.

[clauderic]

For anyone stumbling on this discussion, animating insertion / deletion of items is now possible by combining the layoutMeasuring prop of <DndContext> and the animateLayoutChanges argument of useSortable:

import {MeasuringStrategy} from '@dnd-kit/core';

const measuringConfig = {
  droppable: {
    strategy: MeasuringStrategy.Always,
  }
};

function App() {
  return (
    <DndContext measuring={measuringConfig}>
      {/* ... */}
    </DndContext>
}

import {useSortable, defaultAnimateLayoutChanges} from '@dnd-kit/sortable';

function animateLayoutChanges(args) {
  const {isSorting, wasSorting} = args;

  if (isSorting || wasSorting) {
    return defaultAnimateLayoutChanges(args);
  }

  return true;
}

function Sortable(props) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({
    animateLayoutChanges,
    id: props.id,
  });

  const style = {
    transition,
    transform: CSS.Translate.toString(transform),
  };
  
  return (
    <button ref={setNodeRef} style={style} {...listeners} {...attributes} />
  )
}

Kapture.2021-03-23.at.21.56.00.mp4

Kapture.2021-03-22.at.10.31.28.mp4

Refer to these stories to see it in action:
https://5fc05e08a4a65d0021ae0bf2-mhplerkrjw.chromatic.com/?path=/story/presets-sortable-vertical--removable-items

https://5fc05e08a4a65d0021ae0bf2-mhplerkrjw.chromatic.com/?path=/story/examples-pages-layout--grid

[heroboy]

hello @clauderic , can you help me with this?
https://codesandbox.io/s/gracious-glitter-poyxg?file=/src/TestDndSortable.tsx

[heroboy]

Sorry, I find I forgot to add the key prop.
But even I add the key, the animation looks not correct.
Look like the animation start position is always the position when it is first mounted.

And I tried your grid example, when click the cross button, the animation is not always occure.

[AbdallahMostafaIbrahim]

I believe wasSorting was changed to wasDragging in the animateLayoutChanges() function for the newer versions. That fixed glitchy or 'uncool' animations with dragging.

[anton-iskryk]

I believe wasSorting was changed to wasDragging in the animateLayoutChanges() function for the newer versions. That fixed glitchy or 'uncool' animations with dragging.

Now I try to replace 'wasSorting' with 'wasDragging' and this smooth animation stops working(

[petterastedt]

I was trying to fix this for days until I found this post. My issue was that I wanted to re-order the list with a button click, but when I changed the state the items didn't animate. Thank you so much @clauderic !

[ashiqdey]

"LayoutMeasuringStrategy" and "defaultAnimateLayoutChanges" are not found in @dnd-kit/core version 5.0.3 . Which version should I use?

these are the packages I have installed

@dnd-kit/core: ^5.0.3
@dnd-kit/sortable: ^6.0.1
@dnd-kit/utilities: ^3.1.0

[twiddlecoding]

Hello!
I'm trying to get the animations to work when removing an item from the array, but I think I need some help. I've been looking through the source code, the docs, and every github thread regarding this, with no success.

I'm using the sortablecontext and a drag-overlay. These are my versions of dnd-kit:
"@dnd-kit/core": "^6.0.8",
"@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/utilities": "^3.2.1",

I'm using three components:
SortableTable.js
SortableItem.js
Item.js

At the moment, the "+" button is set to remove item "4". As you can see in the gif above, the animation works when dragging, but not when removing an item.

SortableTable.js:

import React, { useState } from "react";
import {
    closestCenter,
    DndContext, 
    DragOverlay,
    KeyboardSensor,
    PointerSensor,
    TouchSensor,
    useSensor,
    useSensors,
    MeasuringStrategy,
  } from '@dnd-kit/core';
  import {
    arrayMove,
    SortableContext,
    sortableKeyboardCoordinates,
    rectSortingStrategy,
  } from '@dnd-kit/sortable';
  
  import {SortableItem} from './SortableItem';
  import {Item} from './Item';

  
    
const SortableTable = (props) => {
    const [activeId, setActiveId] = useState(null);
    const [items, setItems] = useState(['1', '2', '3', '4', '5', '6', '7']);
    const sensors = useSensors(
      useSensor(PointerSensor),
      useSensor(KeyboardSensor, {
        coordinateGetter: sortableKeyboardCoordinates,
      }),
      useSensor(TouchSensor, {
        // Press delay of 250ms, with tolerance of 5px of movement
        activationConstraint: {
        delay: 1250,
        tolerance: 5,
      },
      })
    );

    

    return (
      <div className="card card-compact rounded-sm w-full h-fit max-h-auto lg:max-h-[70vh] min-h-[400px] lg:min-h-[400px] lg:overflow-scroll scrollbar-hide bg-base-100 shadow-xl mt-5 pt-3 px-3">               
        
      <DndContext 
        sensors={sensors}
        collisionDetection={closestCenter}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
        measuring={{
          droppable: {
          strategy: MeasuringStrategy.Always,
        }}}
      >
        <SortableContext 
          items={items}
          strategy={rectSortingStrategy}
        >
          <div className="grid grid-cols-2 sm:grid-cols-3">
          {items.map(id => 
          
            <div className="flex flex-col mb-1">
              <div className={"flex-grow h-6 mb-1 px-3 " + (Number(id)<5 && " bg-base-200 ") + (Number(id)>=5 && " bg-base-300 ") + (Number(id)==4 && " rounded-tr-2xl ") + (Number(id)==5 && " ml-6 ")}>{id == "1" && "Verse"}{id == "5" && "Chorus"}</div>
              <div className="flex flex-row items-center pb-2">
                <button className="btn btn-ghost btn-xs font-black text-lg w-1 h-10 mx-1">+</button>
                <SortableItem key={id} id={id} activeid={(activeId == id).toString()} />
                
              </div>
            </div>
          
            )}
            <div className="flex flex-col mb-1 ml-6">
            <div className="flex-grow h-6 bg-base-100 mb-1 px-3"></div>
            {/* <div className="flex-grow h-6 bg-base-100 mb-1 px-3"></div> */}
            <div className="flex flex-row items-center pb-2">
              <button onClick={()=>setItems(['1', '2', '3', '5', '6', '7'])}className="btn btn-outline flex-grow btn-neutral h-28 rounded-md text-2xl " >
                +
                
              </button>
            </div>
            </div>
          </div>
          
        </SortableContext>
        <DragOverlay>
          {activeId ? <Item id={activeId} drag={true}/> : null}
        </DragOverlay>
      </DndContext>
      </div>
    );
    
    function handleDragStart(event) {
      const {active} = event;
      
      setActiveId(active.id);
    }
    
    function handleDragEnd(event) {
      const {active, over} = event;
      
      if (active.id !== over.id) {
        setItems((items) => {
          const oldIndex = items.indexOf(active.id);
          const newIndex = items.indexOf(over.id);
          
          return arrayMove(items, oldIndex, newIndex);
        });
      }
      
      setActiveId(null);
    }
  }

export default SortableTable;

SortableItem.js:

import React from 'react';
import {useSortable} from '@dnd-kit/sortable';
import {CSS} from '@dnd-kit/utilities';
import {Item} from './Item';
import {defaultAnimateLayoutChanges} from '@dnd-kit/sortable';


function always() { //I've been trying to put this on animateLayoutChanges too, but the result is the same.
  return true;
}

function customAnimateLayoutChanges(args) {
  if (args.isSorting || args.wasDragging) {
    return defaultAnimateLayoutChanges(args);
  }
  
  return true;
}

export function SortableItem(props) {
  

  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({
    id: props.id,
    animateLayoutChanges: customAnimateLayoutChanges
  });
  
  const style = {
    transform: CSS.Transform.toString(transform),
    transition
  };

  
  
  return (
    <Item ref={setNodeRef} style={style} {...attributes} {...listeners} {...props} activeid={props.activeid.toString()} >
      
      
      
    </Item>
    
  );
}

Item.js:

import { forwardRef } from 'react';
import {SlOptions} from "react-icons/sl";

export const Item = forwardRef(({id, listeners, attributes, style, ...props}, ref) => {
  
  
  return (
    <div className={"flex-grow bg-base-100 h-28 rounded-sm text-xl hover:bg-primary drop-shadow-[0_1px_2px_rgba(0,0,0,0.25)]  " + (props.activeid=="true" && "opacity-50 ")+ (props.drag && "shadow-2xl ")} ref={ref} style={style} {...attributes}  >
      <div className="grid grid-cols-4 h-full">
      <button className="col-span-3 pt-2 justify-self-end self-start text-xl opacity-30 hover:opacity-100"><SlOptions className=""/></button>
      <button  {...props} {...listeners} className="justify-self-end self-start pr-2 pt-2 opacity-30 hover:opacity-100 touch-none"><svg viewBox="0 0 20 20" width="20"><path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path></svg></button>
      
      <div className="col-span-4 pl-6 font-bold">{id}</div>
      <span className="col-span-4 badge badge-ghost badge-sm font-normal ml-6 mb-5 mt-1">open</span>
      <div className="col-span-3 pl-6 pt-1 pb-1 text-slate-200 bg-primary-focus text-xs">D Mixolydian</div>
      <div className="pl-6 pt-1 pb-1 text-slate-200 bg-primary-focus text-xs">1#</div>
      
      </div>
      
    </div>
  );
});

I would greatly appreciate feedback on this. Thank you!

@clauderic

[ranbena]

@twiddlecoding better put this code example in a working sandbox (for instance, in codesandbox.io), since it's easier to debug and play with.
(Also, notice you're not using a key={id} prop in the items.map and that might be causing the issue)

[twiddlecoding]

That's it! Perfect. Thank you so much. I have some lag when starting to drag something for the first time since a refresh. Other then that it now works perfectly.

[Rudra072]

I am having issue like when i delete something say column it works like it transitions smoothly to fill up space however i cant sort my column now because of defaultAnimateLayoutChanges

[kamil-sienkiewicz-asi]

Guys, I did something like that and it seems to work both when removing item and when moving it around other items.

{isActiveItemOverTrash ? (
  activeItem && <SortableOverlay>{renderItem(activeItem)}</SortableOverlay>
) : (
   <SortableOverlay>{activeItem ? renderItem(activeItem) : null}</SortableOverlay>
)}

kinda ugly but it is what it is. 🤷