Common 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.
});

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.

My inline elements are not animated

Elements adjacent to text nodes are excluded from the animations. This prevents breaking text flow when elements like <span> or <a> are mixed with text content.

<!-- This span won't animate position/size -->
<p>Some text <span class="highlight">inline element</span> more text</p>

<!-- This div will animate normally -->
<div class="container">
  <div class="child">No adjacent text</div>
</div>

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.