Flip

The Flip component applies a 3D flip transition to a single child element, providing a smooth entrance and exit motion along a chosen axis or direction. It manages the element's transition lifecycle so you can declaratively show or hide content with a visually engaging flip motion while preserving DOM semantics and accessibility.

Usage

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

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

<Flip in={isVisible} direction="YRight" duration={1200}>
  <div>Content to flip</div>
</Flip>

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

<Flip in={isVisible} direction="YRight" duration={1200}>
  <div>Content to flip</div>
</Flip>

Demos

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

Props

The following table outlines the props for the Flip 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	'LeftDown' \| 'LeftUp' \| 'RightDown' \| 'RightUp' \| 'XDown' \| 'XUp' \| 'YLeft' \| 'YRight'	'ease'	Specifies the direction of the flip animation.

Methods

The following table outlines the methods for the Flip component:

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

Events

The following table outlines the events for the Flip component: