Socket
Socket
Sign inDemoInstall

react-parallax-tilt

Package Overview
Dependencies
5
Maintainers
1
Versions
400
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-parallax-tilt

Easily apply tilt hover effect on React components - lightweight/zero dependencies


Version published
Maintainers
1
Weekly downloads
25,598
decreased by-11.31%

Weekly downloads

Readme

Source

React Tilt

npm version npm downloads npm bundle size Open issues TypeScript semantic-release

CI CI CI CI CI Codecov Coverage

CI CI

👀 Easily apply tilt hover effect on React components

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,...) 🔗demo
  • Events to keep track of component values 📐 (tilt, glare, mousemove,...) 🔗demo
  • Many effects that can be easily applied:
    • scale on hover 🔗demo
    • disable x/y axis 🔗demo
    • flip component vertically/horizontally 🔗demo
    • tilt hover effect on the whole window 🔗demo
    • tilt component with custom manual input 🕹 (joystick, slider etc.) 🔗demo
    • parallax effect on overlaid images 🔗demo

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.

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.

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)
    • if you're using VS Code, then you can
      • use the in-built port-forwarding feature to expose your localhost to the internet and optionally change the protocol to https
      • alternatively, use microsoft's live-share extension which supports sharing server through a tunnel.
  • 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).

Development

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

Contributing

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

Keywords

FAQs

Last updated on 27 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc