Has anyone implemented a drop animation without using DragOverlay?

[jmcannon]

I feel like I'm almost there, but still getting jumpy behavior when I release.

I'm setting a conditional style like this on my SortableItem:

transition: isDragging ? '' : 'transform 350ms'

Any nudges in the right direction are appreciated! Thanks :)

[joseDaKing]

You could hide the actual Component while dragging and use drag overlay it will yield great results

[clauderic]

@jmcannon I'd recommend using <DragOverlay> if you plan on having drop animations. They're really hard to achieve without it. What's the rationale for not using <DragOverlay>?

[jmcannon]

Thanks for the response! I have used DragOverlay for other things, and it works well. My question pertains to a feature where I have draggable videos. I don't want to load two HTML video elements per video. I could make a static image of the first frame of each video, but that's a lot of work and doesn't account for dragging a video that's not at the beginning.

I'm open to other ideas for a clean DragOverlay implementation with videos, but the Sortable works great for this use case out of the box. It would be really nice to have that clean drop animation, but it's not a deal-breaker.

[RemyMachado]

Any update on this? This story example doesn't use an overlay and has a nice animation. Is it still hard to achieve?

EDIT: it turns out that it uses DragOverlay under the hood, without mentioning it in the story title...

[timurridjanovic]

Any solution for this? @clauderic @jmcannon @RemyMachado

I can't use the DragOverlay because I'm dealing with black box components (I can't change them) that reload everytime they're unmounted/remounted. If I render them in the DragOverlay, it looks weird because the component Im dragging suddenly reloads and shows spinners. Not using the DragOverlay works but then the drop animation looks choppy..