Components · Motion
Scale
StableSince v0.0.1
Scales content in/out from its center.
import { Scale } from '@nexub/react';Examples
Default
Toggle
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| inrequired | boolean | — | When true, scales content in from 0 to 1. When false, scales it back down to 0. |
| duration | 'instant' | 'fast' | 'normal' | 'slow' | 'slower' | 'normal' | Controls the animation speed using the design token scale. |
| easing | 'linear' | 'in' | 'out' | 'in-out' | 'out-expo' | 'spring' | 'out' | Easing curve applied to the animation. |
| unmountOnExit | boolean | false | Removes the element from the DOM after the exit animation completes. |
| as | React.ElementType | 'div' | The HTML element or component to render as the wrapper. |
| childrenrequired | React.ReactNode | — | Content to animate. |
On iOS & Android
Web only
Scale has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.