Flip

Flips an element, revealing its hidden face. It can be used to create transition effects and animations.

Installation

pnpm add @inpulse-ds/flip

Usage

import {
  Flip,
  FlipTrigger,
  FlipContent,
  FlipFront,
  FlipBack,
} from "@inpulse-ds/flip";
 
return (
  <>
    <Flip>
      <FlipTrigger>Flip it!</FlipTrigger>
      <FlipContent>
        <FlipFront>
          <h2>Front content</h2>
        </FlipFront>
        <FlipBack>
          <h2>Back content</h2>
        </FlipBack>
      </FlipContent>
    </Flip>
  </>
);

Examples

Use hover

Apply the useHover property to activate the flip effect when hovering over the element. The back side content will be displayed while the mouse is over the FlipContent. Note that this behavior only works on desktop devices. Ensure there is another method to allow back-side content to be viewed on mobile devices.

Vertical orientation

By default, the flip effect will be applied horizontally. To apply the effect vertically, add the axis property to the Flip component, with the value y.

Reverse

If you want to reverse the direction of the flip effect, add the reverse property to the Flip component. This property has an effect on both horizontal and vertical orientation.

Activate with button

Use the FlipTrigger component to activate the flip effect. The contents of the back will be displayed when the button is pressed.