Common auto layout gotchas

While the layout API handles most animation scenarios automatically, some edge cases may produce unexpected results. Here's what to watch out for.

Some elements are fading out unexpectedly

When using a children selector, elements that are descendants of matched children (but not targets themselves) will only get their state updated at 50% of the transition progress. To avoid hard cut between the two states, these elements are fading to opacity 0 then back to 1 under these conditions:

• The element is not explicitly targeted by the children selector
• The element's size has changed
• Its parent is a target and the parent's size has also changed

const layout = createLayout('#root', {
  children: '.card', // Only .card elements are targets
  swapAt: { opacity: 1 } // This will make sure all descendants of .card are always visible during the transition.
});

The root element position "jumps" during a transition

The position of the root element is never animated because it could cause other issues like having the root siblings jumping during a transition because they are not part of the layout.
The root dimensions can be animated because animating the width and height will affect other elements position (in most cases).

// From this
const layout = createLayout('#container .grid'); // .grid position can't be animated.
// To this
const layout = createLayout('#container'); // Now .grid position can be animated

My text is jumping during a layout transition

Animating fontSize alongside width or height can cause text to reflow mid-animation, especially in Firefox. Even if the start and end states have identical line breaks, intermediate frames may have a width/font-size ratio that triggers wrapping.

Some elements inlined within the text are not moving

To prevents breaking text flow during a transition, elements adjacent to text nodes are excluded from position animations.

<p>Some text <span class="highlight">inline element</span> more text</p>

<p><span>Some text</span> <span class="highlight">inline element</span> <span>more text</span></p>

Transform shorthands are not working

The enterFrom, leaveTo, and swapAt parameters do not support CSS transform shorthands like scale, rotate, x, y etc.

// Won't work
createLayout('#root', {
  enterFrom: { scale: 0 }
});

// Use transform string
createLayout('#root', {
  enterFrom: { transform: 'scale(0)' }
});

SVG elements are not animated

SVG elements and their descendants are excluded from layout animations. Only HTML elements are tracked and animated.