Animation

Native state

Component style maps respond to native state attributes such as open, closed, starting and ending states. Keep these attributes and the native part's lifecycle when composing an overlay. Hiding the element with an unrelated timer can interrupt dismissal and focus restoration.

Custom transitions

Add a transition through xstyle only when the component exposes the state you need. Prefer opacity and transforms for visual movement; test rapid open/close interruptions and avoid animating layout on every pointer movement.

Inspect the component's StyleX source and actual API before overriding a transition. Families do not share a universal animation prop.

Reduced motion

Respect the user's motion preference in custom application styles:

1@media (prefers-reduced-motion: reduce) {2  .project-transition {3    animation: none;4    transition: none;5  }6}

This application rule does not replace the native component's state or completion handling. Test focus restoration and dismissal with reduced motion enabled.