👀 Easily apply tilt hover effect on React components
Demos created with React DemoTab 📑
npm install react-parallax-tilt
- Lightweight (<4kb), zero dependencies 📦
- 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 and functionalities 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
Range: 0 - 90
Max tilt rotation (degrees) on x axis.
tiltMaxAngleY: number ▶︎ 20
Range: 0 - 90
Max tilt rotation (degrees) on y axis.
tiltAxis: Axis | null ▶︎ null
Axis = 'x' | 'y'
Which axis should be enabled. If null both are enabled.
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
Range: 0 - 1
The maximum glare opacity (0.5 = 50%, 1 = 100%, etc.).
glareColor: string ▶︎ #ffffff
Set color of glare effect.
glarePosition: GlarePosition ▶︎ bottom
GlarePosition = 'top' | 'right' | 'bottom' | 'left' | 'all'
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: Function => (tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, eventType: string | null)
Gets triggered when user moves on the component.
onEnter: Function => (eventType: string | null)
Gets triggered when user enters the component.
onLeave: Function => (eventType: string | null)
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 this 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 all the examples and start storybook server on localhost:9009:
- clone
npm install
npm start
or 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
Start coding! 🎉
All contributions are welcome!
Please take a moment to review guidelines PR | Issues