Skip to content
Easily apply tilt hover effect on React components 👀
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Latest commit d49ee73 Oct 12, 2019

README.md

React Tilt

npm version npm bundle size Build Status Codecov Coverage TypeScript

Easily apply tilt hover effect on React components 👀 - inspired by vanilla-tilt.js.

Demo

Live demo & Code examples

Install

  • npm npm install react-parallax-tilt
  • yarn yarn add react-parallax-tilt

Features

  • 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:

Example

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'));

Props

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.

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.

Gyroscope - Device Orientation

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
  • Chrome, Firefox, Safari do not handle the angles the same way (on some axes the directions are reversed)

Development

Easily set up a local development environment!

Build all the examples and starts storybook server on localhost:9009:

  • clone
  • npm install
  • npm start

OR

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! 🎉

Contributing

All contributions are welcome!
Please take a moment to review guidelines PR | Issues

You can’t perform that action at this time.