React Flip Tilt

A Performant Customizable React Component Providing the Flip-Tilt Effect

Main Demo • Main Demo (Parallax) • Flip Direction Demo • Control Element Demo • Storybook

Table of Contents

• Features
• Installation
• Usage
• Props
• Events/Callbacks
• Ref
• Credits
• Author
• License

Features

• Easy to use
• Highly customizable
• Built with performance in mind
• Built from the ground up using React Hooks/TypeScript (is not a port of another library)
• Minimum amount of component re-renders
• Typed props with JSDoc descriptions
• Tested extensively using Cypress/Storybook
• Plus all of the features of react-next-tilt like:
  • Touch and Gyroscope support
  • Two customizable glare effects (spot/line)
  • Scale on Hover/Touch
  • Shadow on Hover/Touch
  • Disable Scroll on Touch
  • Full-Page Listening
  • Control Element
  • Parallax ready
  • and more
• Plus all of the features of react-next-parallax like:
  • Parallax effect
  • Animations based on tilt angle
  • Multiple animation modes
  • and more

Installation

1$ npm install framer-motion react-flip-tilt

Once the package is installed, you can import the component:

1import { FlipTilt } from 'react-flip-tilt';

Usage

You can set the front/back properties to either an image source as string or an element/component

Image Source

1<FlipTilt front="/front.webp" back="/back.webp" />

Element/Component

1<FlipTilt front={<div>...</div>} back={<MyComponent />} />

Mixture of Both

1<FlipTilt front="/front.webp" back={<MyComponent />} />

Parallax Effect

Using react-next-tilt (default)

• This component is "parallax ready", meaning you don't need to change any settings for it to work.

• You just need to set up your parallax effect in JSX/CSS and set it as the front/back element.

• You can read this article to learn more about how to set up the 3D parallax effect.

Using react-next-parallax (type='parallax')

• Follow the usage guide on react-next-parallax's readme.

• Instead of placing your scene inside <Parallax></Parallax>, set it as the front/back element.

Props

All props are optional

In addition to these props, you can use:

• Any valid HTMLDivElement props like className='', data-...='...', onMouseMove={...} etc. they will be applied to the container element.
• Any of the react-next-tilt props like scale, disableScrollOnTouch, controlElement, etc.
• Any of the react-next-parallax props like animationMode, animationReverse, offsetMultiplier, etc. (when type is set to 'parallax')

While you can flip the component by changing the flipped prop, it will cause the component to re-render and interrupts the animation. It is advised to use the flip() function exposed by the component's ref instead.

Events/Callbacks

The component has the following events/callbacks in addition to react-next-tilt events/callbacks:

Ref

The component's ref object contains the following properties in addition to react-next-tilt ref properties:

Ref Usage (ref function)

1import { FlipTilt } from 'react-flip-tilt';
2
3const MyComponent = () => {
4  return (
5    <FlipTilt
6      ref={(ref) => {
7        if (ref) {
8          //do something with the ref
9        }
10      }}
11      ...
12    />
13  );
14};

Ref Usage (useEffect)

1import { useRef, useEffect } from 'react';
2import { FlipTilt, FlipTiltRef } from 'react-flip-tilt';
3
4const MyComponent = () => {
5  const ref = useRef<FlipTiltRef>(null);
6
7  useEffect(() => {
8    if (ref.current) {
9      //do something with the ref
10    }
11  }, []);
12
13  return <FlipTilt ref={ref} ... />;
14};

Flip on Mount

1import { useRef, useEffect } from 'react';
2import { FlipTilt, FlipTiltRef } from 'react-flip-tilt';
3
4const MyComponent = () => {
5  const ref = useRef<FlipTiltRef | null>(null);
6
7  useEffect(()=>{
8    if (ref.current) {
9    //do something else with the ref
10    }
11  },[]);
12
13  return (
14    <FlipTilt
15      ref={async (r) => {
16        if (r) {
17          console.log(`isFlipped = ${r.isFlipped()}`);
18          await r.flip();
19          console.log(`isFlipped = ${r.isFlipped()}`);
20          ref.current = r;
21        }
22      }}
23      ...
24    />
25  );
26};

Credits

Animated using framer-motion

Inspired by evolany.com

Author

Rashid Shamloo (github.com/rashidshamloo)

License

MIT