github.com/mkosir/react-parallax-tilt

React Tilt

👀 Easily apply tilt hover effects to React components

Live Demo 💥

Install

npm install react-parallax-tilt

Features

• 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, etc.) 🔗demo
• Event tracking for component values 📐 (tilt, glare, mousemove, etc.) 🔗demo
• Multiple built-in effects:
  • Scale on hover 🔗demo
  • Disable x/y axis 🔗demo
  • Flip component vertically/horizontally 🔗demo
  • Window tilt hover effect 🔗demo
  • Manual tilt control 🕹 (via joystick, slider, etc.) 🔗demo
  • Parallax effect for overlaid images 🔗demo

Example

import Tilt from 'react-parallax-tilt';

const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
        <h1>React Parallax Tilt 👀</h1>
      </div>
    </Tilt>
  );
};

Props

All props are optional.
Here's the complete list of available props and their default values:

▶︎ indicates the default value

tiltEnable: boolean ▶︎ true
Enables/disables the tilt effect.

tiltReverse: boolean ▶︎ false
Reverses the tilt direction.

tiltAngleXInitial: number ▶︎ 0
Initial tilt angle (in degrees) on the x-axis.

tiltAngleYInitial: number ▶︎ 0
Initial tilt angle (in degrees) on the y-axis.

tiltMaxAngleX: number ▶︎ 20
Maximum tilt rotation (in degrees) on the x-axis. Range: 0°-90°.

tiltMaxAngleY: number ▶︎ 20
Maximum tilt rotation (in degrees) on the y-axis. Range: 0°-90°.

tiltAxis: 'x' | 'y' ▶︎ undefined
Enables tilt on a single axis only.

tiltAngleXManual: number | null ▶︎ null
Manual tilt rotation (in degrees) on the x-axis.

tiltAngleYManual: number | null ▶︎ null
Manual tilt rotation (in degrees) on the y-axis.

glareEnable: boolean ▶︎ false
Enables/disables the glare effect.

glareMaxOpacity: number ▶︎ 0.7
Maximum glare opacity (0.5 = 50%, 1 = 100%). Range: 0-1

glareColor: string ▶︎ #ffffff
Sets the color of the glare effect.

glarePosition: 'top' | 'right' | 'bottom' | 'left' | 'all' ▶︎ bottom
Sets the position of the glare effect.

glareReverse: boolean ▶︎ false
Reverses the glare direction.

glareBorderRadius: string ▶︎ 0
Sets the border radius of the glare. Accepts any standard CSS border radius value.

scale: number ▶︎ 1
Scale of the component (1.5 = 150%, 2 = 200%).

perspective: number ▶︎ 1000
Defines how far the tilt component appears from the user. Lower values create more extreme tilt effects.

flipVertically: boolean ▶︎ false
Enables/disables vertical flipping of the component.

flipHorizontally: boolean ▶︎ false
Enables/disables horizontal flipping of the component.

reset: boolean ▶︎ true
Determines if effects should reset on onLeave event.

transitionEasing: string ▶︎ cubic-bezier(.03,.98,.52,.99)
Easing function for the transition.

transitionSpeed: number ▶︎ 400
Speed of the transition.

trackOnWindow: boolean ▶︎ false
Tracks mouse and touch events across the entire window.

gyroscope: boolean ▶︎ false
Enables/disables device orientation detection.

onMove: ({ tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, event: Event }) => void
Callback triggered when user moves on the component.

onEnter: (event: Event) => void
Callback triggered when user enters the component.

onLeave: (event: Event) => void
Callback triggered when user leaves the component.

Gyroscope - Device Orientation

Please note that device orientation detection is currently experimental technology.
Check the browser compatibility before using it in production.
Important considerations when using device orientation:

• Always use secure origins (such as https)
• It may not work in all browsers when used within a cross-origin <iframe> element

Device Orientation on iOS 13+

Apple disabled device motion and orientation by default starting with iOS 12.2.
iOS 13+ provides a permission API to access device orientation events.

When using the gyroscope feature:

<Tilt gyroscope={true}>
  <h1>React Parallax Tilt 👀</h1>
</Tilt>

A permission dialog will prompt the user to allow motion and orientation access at the domain level:

Note: User interaction (like tapping a button) is required to display the permission dialog - it cannot be triggered automatically on page load.

Development

Easily set up a local development environment!

Build project and start storybook on localhost:

• clone
• npm install
• npm start

Start coding! 🎉

Alternative setup using npm link

• Clone this repository and navigate to its location

• Run the following commands:

  npm install
  npm link # link your local repo to your global packages
  npm run build:watch # build the files and watch for changes
  

• Clone the project you want to test with react-parallax-tilt and run:

  npm install
  npm link react-parallax-tilt # link your local copy into this project's node_modules
  npm start
  

Contributing

All contributions are welcome!
Please review contribution guidelines: Pull Requests | Issues