Container bounds

This skill reviews width and height animation that follows content. It keeps measurement and animation on different elements so the layout does not feed itself.

Every check is a pair. The broken line sits beside the line that replaces it.

Measuring and animating the same node is a finding. Animating from 0 on the first frame is a finding. Use this pattern rarely. Curves for the transition belong to timing-functions. The published container transition is duration: 0.2 and delay: 0.05.

When to use

Use this for a button label swap, an accordion, a disclosure or a small panel whose bounds change with content. Do not use it for a static page section or for every card on a screen.

1. Find size animations

Read the files in scope. List animators of width or height. Also list any useMeasure, ResizeObserver or getBoundingClientRect tied to them. If the size never changes, say so and stop.

2. Split measure from motion

The outer element animates. The inner element is measured. The same node must not do both. That is container-two-div-pattern. On the first frame bounds are 0. Animate bounds.width > 0 ? bounds.width : "auto" so the open does not grow from nothing. That is container-guard-initial-zero.