A Performant Customizable React Component Providing the Flip-Tilt Effect
MIT License
$ npm install framer-motion react-flip-tilt
Once the package is installed, you can import
the component:
import { FlipTilt } from 'react-flip-tilt';
You can set the front
/back
properties to either an image source as string
or an element/component
<FlipTilt front="/front.webp" back="/back.webp" />
<FlipTilt front={<div>...</div>} back={<MyComponent />} />
<FlipTilt front="/front.webp" back={<MyComponent />} />
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.
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.
All props are optional
In addition to these props, you can use:
- Any valid
HTMLDivElement
props likeclassName=''
,data-...='...'
,onMouseMove={...}
etc. they will be applied to the container element.- Any of the
react-next-tilt
props likescale
,disableScrollOnTouch
,controlElement
, etc.- Any of the
react-next-parallax
props likeanimationMode
,animationReverse
,offsetMultiplier
, etc. (whentype
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 theflip()
function exposed by the component's ref instead.
The component has the following events/callbacks in addition to react-next-tilt
events/callbacks:
The component's ref object contains the following properties in addition to react-next-tilt
ref properties:
import { FlipTilt } from 'react-flip-tilt';
const MyComponent = () => {
return (
<FlipTilt
ref={(ref) => {
if (ref) {
//do something with the ref
}
}}
...
/>
);
};
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} ... />;
};
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;
}
}}
...
/>
);
};
Animated using framer-motion
Inspired by evolany.com
Rashid Shamloo (github.com/rashidshamloo)