👀 Easily apply tilt hover effect on React components
npm install react-parallax-tilt
- Lightweight (≈3kB), zero dependencies 📦
- Tree-shakable 🌳 ESM and CommonJS support
- Works with React v15 onwards
- Supports mouse and touch events
- Support for device tilting (gyroscope)
- Glare effect 🌟 with custom props (color, position,...) 🔗demo
- Events to keep track of component values 📐 (tilt, glare, mousemove,...) 🔗demo
- Many effects that can be easily applied:
import React from 'react';
import ReactDOM from 'react-dom';
import Tilt from 'react-parallax-tilt';
const App = () => {
return (
<Tilt>
<div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
<h1>React Parallax Tilt 👀</h1>
</div>
</Tilt>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
All of the props are optional.
Below is the complete list of possible props and their options:
▶︎ indicates the default value if there's one
tiltEnable: boolean ▶︎ true
Boolean to enable/disable tilt effect.
tiltReverse: boolean ▶︎ false
Reverse the tilt direction.
tiltAngleXInitial: number ▶︎ 0
Initial tilt value (degrees) on x axis.
tiltAngleYInitial: number ▶︎ 0
Initial tilt value (degrees) on y axis.
tiltMaxAngleX: number ▶︎ 20
Max tilt rotation (degrees) on x axis (range: 0°-90°
).
tiltMaxAngleY: number ▶︎ 20
Max tilt rotation (degrees) on y axis (range: 0°-90°
).
tiltAxis: 'x' | 'y' ▶︎ undefined
Enable tilt on single axis.
tiltAngleXManual: number | null ▶︎ null
Manual tilt rotation (degrees) on x axis.
tiltAngleYManual: number | null ▶︎ null
Manual tilt rotation (degrees) on y axis.
glareEnable: boolean ▶︎ false
Boolean to enable/disable glare effect.
glareMaxOpacity: number ▶︎ 0.7
The maximum glare opacity (range: 0-1
).
glareColor: string ▶︎ #ffffff
Set color of glare effect.
glareBorderRadius: string ▶︎ 0
Accepts any standard CSS border radius. Useful if the glare color is different to the page color.
glarePosition: 'top' | 'right' | 'bottom' | 'left' | 'all' ▶︎ bottom
Set position of glare effect.
glareReverse: boolean ▶︎ false
Reverse the glare direction.
scale: number ▶︎ 1
Scale of the component (1.5 = 150%, 2 = 200%, etc.).
perspective: number ▶︎ 1000
The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.
flipVertically: boolean ▶︎ false
Boolean to enable/disable vertical flip of component.
flipHorizontally: boolean ▶︎ false
Boolean to enable/disable horizontal flip of component.
reset: boolean ▶︎ true
If the effects has to be reset on onLeave
event.
transitionEasing: string ▶︎ cubic-bezier(.03,.98,.52,.99)
Easing of the transition when manipulating the component.
transitionSpeed: number ▶︎ 400
Speed of the transition when manipulating the component.
trackOnWindow: boolean ▶︎ false
Track mouse and touch events on the whole window.
gyroscope: boolean ▶︎ false
Boolean to enable/disable device orientation detection.
onMove: ({ tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, eventType: string }) => void
Gets triggered when user moves on the component.
onEnter: (eventType: string) => void
Gets triggered when user enters the component.
onLeave: (eventType: string) => void
Gets triggered when user leaves the component.
Please keep in mind that detecting device orientation is currently experimental technology.
Check the browser compatibility before using it in production.
A few takeaways when using device orientation event:
- always use secure origins (such as
https
) - it doesn't work in all browsers when using it in cross-origin
<iframe>
element
Using device orientation on iOS 13
Apple decided turning device motion and orientation off by default since iOS 12.2.
With iOS 13 permission API can be used to gain access to device orientation event.
When using gyroscope feature:
<Tilt gyroscope={true}>
<h1>React Parallax Tilt 👀</h1>
</Tilt>
it will present a permission dialog prompting the user to allow motion and orientation access at domain level:
Note that user needs to take some action (like tapping a button) to be able to display the dialog (invoking dialog on page load is not possible).
Easily set up a local development environment!
Build project and start storybook on localhost:
- clone
npm install
npm start
Start coding! 🎉
Or setup with npm link
Clone this repo on your machine, navigate to its location in the terminal and run:npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes
Clone project repo that you wish to test with react-parallax-tilt library and run:
npm install
npm link react-parallax-tilt # link your local copy into this project's node_modules
npm start
All contributions are welcome!
Please take a moment to review guidelines PR | Issues