Slide

The Slide component moves a single child element into or out of view along a specified edge (top, bottom, left, or right). It manages positioning and transition lifecycle so you can declaratively slide content in or out while preserving layout flow and accessibility.

Usage

To import and use the Slide component in your application, use the following code snippet:

import { Slide } from '@syncfusion/react-base';

<Slide in={isVisible} direction="Left" duration={800}>
  <div>Content to slide</div>
</Slide>

import { Slide } from '@syncfusion/react-base';

<Slide in={isVisible} direction="Left" duration={800}>
  <div>Content to slide</div>
</Slide>

Demos

Explore the demos of the React Slide component. Refer to this page.

Props

The following table outlines the props for the Slide 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.
direction	'Top' \| 'Bottom' \| 'Left' \| 'Right'	'Right'	Specifies which edge the element moves from or towards during the slide animation.
container	HTMLElement \| null	'null'	Reference to a container element to slide relative to its dimensions. If not provided, slides relative to the viewport (window).

Methods

The following table outlines the methods for the Slide component:

Name	Parameters	Returns	Description
stop	-	void	Stops the current animate.

Events

The following table outlines the events for the Slide component: