Patterns from production · Layout that holds

Measure at rest

Wait for the motion to settle before you measure.

Measure at restLive demo

Try the controls to see the rule.

The rule

Read an element’s box only after its entrance animation has ended. getBoundingClientRect includes transforms, so an element measured mid-entrance looks smaller or further away than it is.

Tokens used

  • motion.duration.base260ms
  • motion.easing.standardcubic-bezier(.2,.7,.2,1)
  • size.tap44px
  • space.md12px

Native spec · generated from this pattern and the shared token registry

SwiftUI
struct OvMeasureAtRest: View {
    let status: String
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        HStack(spacing: OvScale.spaceMd) {
            Text(status).font(.body)
        }
        .frame(minHeight: OvScale.sizeTap)
        .animation(reduceMotion ? .none : .easeOut(duration: OvScale.motionDurationBase), value: status)
    }
}
// Tokens: motion.duration.base=260ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), size.tap=44px, space.md=12px
Compose
@Composable
fun OvMeasureAtRest(status: String, reduceMotion: Boolean) {
    Row(
        modifier = Modifier.defaultMinSize(minHeight = OvScale.SizeTap),
        horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd),
    ) {
        Text(status, style = MaterialTheme.typography.bodyMedium)
    }
    // Apply motion only when !reduceMotion.
}
// Tokens: motion.duration.base=260ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), size.tap=44px, space.md=12px