[labs/motion] Jumpy animation during destroy

[philSixZero]

Description

When having a list container which is absolute or fixed positioned and it is attached to its relative parent's bottom by setting bottom: 0 (instead of letting it implicitly/explicitly be top: 0) and adding keyframes to the out property of animate the animation when deleting an item from the list appears to be jumping.

Steps to Reproduce

1. Render a list in your component:

render() {
    /**
     * Note:
     *  - <ul> is absolute positioned and bottom oriented.
     *  - animate() has `out` keyframes set.
     */
    return html`
      <div style="position: relative; height: 100vh; width: 100vw;">
          <ul style="position: absolute; bottom: 0;">
          ${repeat(this.items, i => i.id, i => html`
            <li animate({
                keyframeOptions,
                in: flyBelow,
                out: fadeOut,
                stabilizeOut: true,
                skipInitial: true
              })>${i.value}</li>`
          )}
          </ul>
      </div>
    `;
}

Live Reproduction Link

Have a look at this modified example in the lit playground which reproduces it.

Expected Results

It should be a smooth animation regardless of the list container's positioning.

Hints

As I debugged a little I found out, that the animate.disconnect() method will insert the element to be destroyed for the sake of animation in the parent one more time after it got deleted. But the insertion is kind of messed up due to the fact, that the _nextSibling has been removed from the DOM already (and that's because it's the nextSibling and not the nextElementSibling - the _nextSibling is a comment element added by lit itself). So the element is always reinserted at the bottom of the list which makes the whole list jump by the height of the removed element every time an element is removed.

This behavior is not observed when the parent container is oriented towards the top (by setting top: X) but pretty sure, the algorithm doesn't work there nonetheless. It's just not noticeable.

Adapting the code to use nextElementSibling when assigning the _nextSibling member, the jumpy animation is not observed anymore. The animation is still not quite smooth for every element which is above the deleted element.

Browsers Affected

• Chrome
• Firefox
• Edge

[sorvell]

We'll need to look into how to improve this. The suggestion seems reasonable, but the way motion is re-adding removed DOM like this is non-ideal and we'd like to do something better.

So, we may want to make the suggested change while investigating a better way to handle this in general.