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

$ npm install framer-motion react-flip-tilt

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

import { 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

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

Element/Component

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

Mixture of Both

<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.

Name	Description	Default
front	Front image/element note: You can pass either an image source as string or an element/component example: 'path/to/image.jpg', <div>...</div>, <Component /> ReactNode	<></>
back	Back image/element note: You can pass either an image source as string or an element/component example: 'path/to/image.jpg', <div>...</div>, <Component /> ReactNode	<></>
direction	Direction of the flip animation see the Flip Direction Demo "horizontal" | "vertical"	"horizontal"
flipReverse	Reverses the rotation of the flip animation see the Flip Direction Demo boolean	false
flipBackReverse	Reverses the rotation of the flip back animation see the Flip Direction Demo boolean	false
borderWidth	Border width applied to the back image/element example: '4px', '1em', '2rem' string	"2px"
borderColor	Border color applied to the back image/element example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)' string(Property.BorderColor)	white
borderStyle	Border style applied to the back image/element example: 'solid', 'dashed', 'dotted' string (Property.BorderStyle)	solid
mass	Mass of the element in framer-motion's spring animation. Higher values will result in more lethargic movement. number	0.5
stiffness	Stiffness of the spring in framer-motion's spring animation. Higher values will create more sudden movement. number	120
flipped	Locks the component to one side true: back side false: front side boolean	-
type	Determines the type of the component 'tilt': react-next-tilt 'parallax': react-next-parallax "tilt" | "parallax"	"tilt"

Events/Callbacks

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

Name	Description	Parameters
onFlip	Callback function that is called with the container element when the component flips and the back side is visible (element: HTMLDivElement) => void	element: The component's container element
onFlipBack	Callback function that is called with the container element when the component flips back and the front side is visible (element: HTMLDivElement) => void	element: The component's container element

Ref

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

Name	Description	Parameters
isFlipped	Returns whether the element is flipped or not () => boolean	-
flip	Animates/Flips the component without re-rendering it. () => Promise<void>	-

Ref Usage (ref function)

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

const MyComponent = () => {
  return (
    <FlipTilt
      ref={(ref) => {
        if (ref) {
          //do something with the ref
        }
      }}
      ...
    />
  );
};

Ref Usage (useEffect)

import { useRef, useEffect } from 'react';
import { FlipTilt, FlipTiltRef } from 'react-flip-tilt';

const MyComponent = () => {
  const ref = useRef<FlipTiltRef>(null);

  useEffect(() => {
    if (ref.current) {
      //do something with the ref
    }
  }, []);

  return <FlipTilt ref={ref} ... />;
};

Flip on Mount

import { useRef, useEffect } from 'react';
import { FlipTilt, FlipTiltRef } from 'react-flip-tilt';

const MyComponent = () => {
  const ref = useRef<FlipTiltRef | null>(null);

  useEffect(()=>{
    if (ref.current) {
    //do something else with the ref
    }
  },[]);

  return (
    <FlipTilt
      ref={async (r) => {
        if (r) {
          console.log(`isFlipped = ${r.isFlipped()}`);
          await r.flip();
          console.log(`isFlipped = ${r.isFlipped()}`);
          ref.current = r;
        }
      }}
      ...
    />
  );
};

Credits

Animated using framer-motion

Inspired by evolany.com

Author

Rashid Shamloo (github.com/rashidshamloo)

License

MIT