Zoom
The Zoom component scales a single child element to create a smooth zoom-in and zoom-out transition. It handles the element's visibility and transition lifecycle so you can declaratively reveal or hide content with a subtle scaling motion while preserving layout flow and accessibility.
Usage
To import and use the Zoom component in your application, use the following code snippet:
Demos
Explore the demos of the React Zoom component. Refer to this page.
Props
The following table outlines the props for the Zoom component:
| Name | Type | Default | Description |
|---|---|---|---|
| appear | boolean | true | Determines if the animation should run on the initial mount. |
| children | ReactElement | - | The content to be animated - must be a single React element. |
| className | string | - | Additional CSS class names to apply to the animate element. |
| delay | number | 0 | Specifies the delay before the animate starts in milliseconds. |
| duration | number | 400 | Specifies the duration of the animate in milliseconds. |
| in | boolean | true | Controls whether the animation plays the "in" (enter) or "out" (exit) effect. |
| timingFunction | string | 'ease' | Specifies the timing function for the animate. |
Methods
The following table outlines the methods for the Zoom component:
| Name | Parameters | Returns | Description |
|---|---|---|---|
| stop | - | void | Stops the current animate. |
Events
The following table outlines the events for the Zoom component:
| Name | Type | Description |
|---|---|---|
| onBegin | (args: AnimateEvent) => void | Triggers when the animate starts, allowing execution of logic at animate start. |
| onEnd | (args: AnimateEvent) => void | Triggers when animate is completed, allowing execution of logic after animate finishes. |
| onFail | (args: AnimateEvent) => void | Triggers when animate fails due to errors, providing error information. |
| onProgress | (args: AnimateEvent) => void | Triggers when animate is in-progress, providing progress information. |