Challenge 4: Collapsing the 🏠 home placeholder

Initially for this new animation pattern, as soon as an item was dragged out of a list, the placeholder in the 🏠 home list would animate closed.

Collapsing the 🏠home list placeholder when leaving the list looks pretty good

While this behaviour looks good, it had some bad consequences. When a drag starts the library captures the dimensions of all of the relevant DOM elements. From that point, no recollection occurs.

If a placeholder is removed from the 🏠 home list during a drag then the home list can shrink. A collapsing 🏠 home list can also cause other ✈️foreign lists on the page to move around. These effects are not reflected in the dimensions captured when lifting.

Knowing whether or not the 🏠 home list will collapse when a placeholder is removed, and by how much, is extremely difficult to know. There are a number of CSS and DOM rules at play. It is also extremely difficult to know if the collapsing of the 🏠 home list will impact the placement of ✈️ foreign lists on the page.

The library cannot simply patch it’s stored dimensions with expected changes, as the changes are unknown. The library could potentially recollect the DOM element’s dimensions, but that is a very difficult and slow path I have tried before.

Here are some problems caused by a collapsing 🏠 home list:

Problem: Dragging below the 🏠 home list would register as being inside the 🏠 home list

Reason: The home list dimension is still recorded as its original size which includes some area below the visible bottom.

Problem: Dragging over a ✈️ foreign list stacked below the 🏠 home list would yield super strange drop targets

Reason: The 🏠 home list is collapsing and the ✈️ foreign list is moving up visually, but the home list and foreign list still have the original dimensions

Problem: Dropping into a ✈️ foreign list stacked below the 🏠 home list would have a broken drop position

Reason: When calculating the drop location the upwards shift of the ✈️foreign list is not being taken into account

Maintaining space of the 🏠 home list

To get around these issues I decided to keep a placeholder in the 🏠 home list for the entire drag to maintain the original size of the 🏠 home list. I would then animate the placeholder closed during a drop.

Fixed: dragging below the 🏠 home list

Fixed: dragging over a stacked ✈️ foreign list

Sadly though, dropping into a stacked foreign list is still broken

Broken: dropping into a stacked ✈️ foreign list

I was animating the placeholder in the 🏠 home list closed during the drop animation. This could cause the 🏠 home list to collapse. Any collapsing could cause the calculated drop location to be incorrect as list collapsing is not being accounted for.

Animate closed after the drop

In order for the drop location to be correct, the size of the placeholder needs to be maintained in the 🏠 home list until after the drop animation has completed. This avoids any 🏠 home list collapsing which can impact our drop location.

Correct drop location into a ✈️ foreign list. Then the placeholder in the 🏠home list collapses

Accidental benefit: less distraction

I originally was a bit sad that the placeholder collapsing in the 🏠 home list needed to happen after the drop animation. I showed it to Jake Miller (UX wizard at Atlassian) and he preferred the new approach of collapsing the placeholder in the 🏠 home list after the drop 😲. He thought it was distracting to have the placeholder collapsing in the 🏠 home list at the same time as the drop animation as there were too many things pulling the user's focus.

“Animations draw the user’s focus. If you have to animate more than one thing, trigger them one after another so the user focuses on a single piece at a time.”

- Jake Miller

By animating the collapse of the placeholder in the 🏠 home list after the drop animation the user is not being distracted from the drop interaction that they are performing.