Motion primitive
A motion primitive for animating the entry and exit of components.Early Access
The new Motion primitive and tokens are currently in early access. We may make frequent breaking changes with limited notice. We don't recommend using this without support from our team.
Props
| Description | Children to be animated. |
|---|---|
| Type | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal |
| Description | Motion token for the entering animation. |
|---|---|
| Type | "var(--ds-avatar-enter)" | "var(--ds-avatar-exit)" | "var(--ds-avatar-hovered)" | "var(--ds-blanket-enter)" | "var(--ds-blanket-exit)" | "var(--ds-button-hovered)" | "var(--ds-button-pressed)" | ... 33 more ... | "var(--ds-spotlight-exit)" |
| Description | CSS properties to apply to the entering animation. |
|---|---|
| Type | false | (XCSSValue<"animationDelay" | "animationDuration" | "animationName" | "animationTimingFunction", DesignTokenStyles, ""> & {} & XCSSPseudo<...> & XCSSMediaQuery<...> & { ...; } & { ...; }) |
| Description | Motion token for the exiting animation. |
|---|---|
| Type | "var(--ds-avatar-enter)" | "var(--ds-avatar-exit)" | "var(--ds-avatar-hovered)" | "var(--ds-blanket-enter)" | "var(--ds-blanket-exit)" | "var(--ds-button-hovered)" | "var(--ds-button-pressed)" | ... 33 more ... | "var(--ds-spotlight-exit)" |
| Description | CSS properties to apply to the exiting animation. |
|---|---|
| Type | false | (XCSSValue<"animationDelay" | "animationDuration" | "animationName" | "animationTimingFunction", DesignTokenStyles, ""> & {} & XCSSPseudo<...> & XCSSMediaQuery<...> & { ...; } & { ...; }) |
| Description | Will callback when the motion has finished in the particular direction.
If it finished entering direction will be |
|---|---|
| Type | (state: Transition) => void |
| Description | Allows getting a ref to the component instance.
Once the component unmounts, React will set @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
|---|---|
| Type | string | Ref<any> |
| Description | Inline styles to apply to the motion container div. These are merged with any animation styles managed internally. |
|---|---|
| Type | CSSProperties |
| Description | A |
|---|---|
| Type | string |
| Description | CSS properties to apply to the motion container. |
|---|---|
| Type | false | (XCSSValue<"width" | "height" | "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "overlay" | "accentColor" | "alignContent" | "alignItems" | ... 485 more ... | "glyphOrientationVertical", object, ""> & ... 4 more ... & { ...; }) |