react-parallax-tilt
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.81 • Public • Published

    React Tilt

    npm version npm downloads npm bundle size CI Codecov Coverage semantic-release prettier TypeScript

    👀 Easily apply tilt hover effect on React components

    Demo 💥

    Install

    npm install react-parallax-tilt

    Features

    • Lightweight (3.8kB), 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:
      • 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' | null ▶︎ null
    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
    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: 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
    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 all the examples and start storybook server on localhost:9009:

    • 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

    Install

    npm i react-parallax-tilt

    DownloadsWeekly Downloads

    4,721

    Version

    1.5.81

    License

    MIT

    Unpacked Size

    102 kB

    Total Files

    17

    Last publish

    Collaborators

    • marko424