Animated placeholders when transitioning between lists

[alexreardon]

When transitioning between lists there is some snapping that occurs:

• when entering a new list the placeholder snaps to the correct height without animating
• when dropping in a foreign list, the original placeholder in the home list does not animate and disappears instantly when the drop completes

The goal is to have both of these scenarios animated. However, in order to ship #2 it was decided that this feature was not critical enough to hold up the release. The interaction still feels really nice - it would just be even better with animated placeholders.

[souporserious]

I'd love to help out here as well if possible. If you have any sort of roadmap or ideas for this I can start a PR. I landed on this implementation for now which somewhat works, just need to update the dimensions snapshot somehow:

function SortableItem({ id, index, children }) {
  return (
    <SortableContainerContext.Consumer>
      {sortableContainerSnapshot => (
        <Draggable draggableId={id} index={index}>
          {(provided, snapshot) => (
            <div>
              <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
                style={getItemStyle(
                  snapshot.isDragging,
                  provided.draggableProps.style
                )}
              >
                {children}
              </div>
              {provided.placeholder && (
                <div
                  style={{
                    height: sortableContainerSnapshot.isDraggingOver ? 51 : 0,
                    transition: 'all 350ms',
                  }}
                >
                  {provided.placeholder}
                </div>
              )}
            </div>
          )}
        </Draggable>
      )}
    </SortableContainerContext.Consumer>
  )
}

Needs some internal work to clean things up, as well as use React Motion, but pretty cool interaction!

Is there anything exposed right now that would allow me to fire a recalculation of dimensions?

[markusenglund]

I would love to see this fixed. Any progress on this issue?
I can't get @souporserious workaround to function properly since my list-items have differing heights.

[souporserious]

@yogaboll you should be able to measure the DOM node and provide that to the height of a wrapper around provided.placeholder. The only thing is the drag and drop get's thrown off because the snapshot of the DOM is out of sync with react-beautiful-dnd. Not sure if there is a way to tell it to update that snapshot after the animation completes.

[markusenglund]

Thanks, I got it working by measuring the list-item.

Unfortunately, this method causes a couple of new visual glitches so I don't think it's worth it for me.

[alexreardon]

I am hoping to see if we can get this working as a part of #8

[lanefelker]

Hi @alexreardon, I see #8 was closed. Was this included in that change? I'm still experiencing the snapping placeholders when dragging between lists

[alexreardon]

Aye, this has not been fixed - but I hope to after next #719 lands

[woohling]

hi @alexreardon , I'm trying to fix this in my pull request. Pls take a look to see if I'm doing this right.

[alexreardon]

We hope to get onto this soon 😊

[woohling]

It seems like I forgot to take scrollable droppable into account... It seems more complicated than I originally thought ....

The main purpose of my PR is make the active area as big as when the placeholder is on the droppable.

I think the default behavior should be when you drag over a foreign list which doesn't have a scrollbar, the active area should expand to the length(or width depending on droppable direction) of the draggable, but when there's a scrollbar existed already, there's no need to expand the active area.

I don't know @alexreardon if you are agreed with this logic. Will update until when we're on the same page.

[alexreardon]

Behaviour (wip)

Where is the gap?

General rule: there should only ever be one gap in all lists to show where a Draggable would end up if dropped

(this is already what we have today)

• Over home droppable: in the home list
• Over foreign droppable: in the foreign list
• Over no droppable: in the home list in the lift position (this is where the item would end up if dropped)

Animation behaviour

Home droppable

• When lifting: placeholder will be inserted into home location. No animation of placeholder
• When moving into foreign list: animate placeholder collapse
• When moving from foreign list to no droppable: animate placeholder expansion
• When moving from foreign list to home droppable: animate placeholder expansion

Foreign droppable

• When moving into foreign list: animate placeholder expansion
• When moving out of foreign list: animate placeholder collapse

Dropping

• When dropping a placeholder's size is not animated closed. It is removed instantly onDragEnd. This allows the dropping item to fit into the new droppable nicely. I think we should be able to let any existing animated expansions finish.

• check if the out of the way animation timing < fastest drop time (it is! that makes things easier)

Performance

Ideally, we render as few Droppables as possible. We might need to animate a mount / unmount for foreign lists in order to achieve this

[alexreardon]

Note to post-leave @alexreardon

In order to overcome unwanted renders put a shouldAnimatePlaceholder function on the context rather than relying on mapProps

[alexreardon]

Things still to overcome:

• strange animations in home list when changing foreign list
• quick home placeholder fluttering when moving between lists that have a gap between them (should we add a small delay before the home placeholder expands?)
• margin collapsing related to placeholder removal
• colouring home list in examples to indicate home (easy to implement - but i want to see how it looks)

[alexreardon]

Early prototype

It looks great! 👍

[alexreardon]

Here is a prototype that is showing great potential: https://deploy-preview-1086--react-beautiful-dnd.netlify.com/iframe.html?selectedKind=board&selectedStory=simple&full=0&addons=0&stories=1&panelRight=0

[alexreardon]

It is hard to get looking smooth across many use cases

[alexlouden]

Looks great! Very excited for this - keep up the amazing work! 😃

[alexreardon]

This was released in 10.1

[alexreardon]

#1096

[Yggdrasilqh]

Here is a prototype that is showing great potential: https://deploy-preview-1086--react-beautiful-dnd.netlify.com/iframe.html?selectedKind=board&selectedStory=simple&full=0&addons=0&stories=1&panelRight=0

Hello @alexreardon , where can I get the source code of this sample ?

[alexreardon]

https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/board/board.jsx