recipe.expand.collapse · dur-base

expand

Communicate expand/collapse hierarchy

ads-motion-expand

Live demonstration

rule.motion.purpose-first
expand

ads-motion-expand · dur-base

expand

Allowed

  • accordion
  • disclosure
  • nav trees

Prohibited

  • full-page layout shifts without reserved space

Performance

Animate grid-template-rows or max-height carefully

Reduced motion

Height jumps instantly