A React port of the vanilla-tilt.js version of Tilt.js
"A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for React"
Check out a simple demo here!
This package uses hooks internally so it has a requirement of React version 16.8 or above.
This package is hosted on npm
npm i react-tilty
This component is imported and used like any standard React component
import React from 'react';
import Tilty from 'react-tilty';
const App = () => {
return (
<div class="App">
<Tilty>
<div />
</Tilty>
</div>
);
};
export default App;Tilty has a variety of options which can be passed as props. These have changed in version 2 so they are no longer nested in a settings object, or available through data- props.
All props are optional besides children.
A class name to be applied to the component's wrapper div.
React styles to be applied to the component's wrapper div.
Whether or not to invert the tilt direction.
The maximum tilt angle in degrees.
Must be between 0 and 180.
The perspective of the tilt transform. Lower values mean the tilt effect is more extreme.
The CSS easing function to use when the mouse enters or leaves the tilt container.
The time in milliseconds the enter/exit transitions will take.
The amount to scale the tilt container while hovered, relative to its normal size.
1.5 = 150%, 0.5 = 50%, etc.
Which axis to disable tilting on, if any.
Whether or not to reset the tilt effect when the mouse leaves the tilt container.
Whether or not to add a light glare effect to the tilt container.
The maximum opacity of the glare effect.
Must be between 0 and 1.
React styles to be applied to the glare effect component.
Whether or not to enable tilting on device orientation changes. This only
works on devices that support the DeviceOrientationEvent
API (e.g. mobile devices).
This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element.
Must be between -180 and 0.
This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element.
Must be between 0 and 180.
This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element.
Must be between -180 and 0.
This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element.
Must be between 0 and 180.
A callback function for the
MouseEnter synthetic event
on the wrapping div element.
A callback function for the
MouseMove synthetic event
on the wrapping div element.
A callback function for the
MouseLeave synthetic event
on the wrapping div element.
A callback function for the custom tiltChange event on the Tilt
component.
interface TiltChangeEvent {
detail: {
/** @example `"-4.90"` */
tiltX: string;
/** @example `"3.03"` */
tiltY: string;
/** @example `64` */
percentageX: number;
/** @example `58.62` */
percentageY: number;
/** @example `121.751281` */
angle: number;
};
}The children to render inside the Tilt component.
<Tilty reverse axis="x" scale={1.2} perspective={900} reset={false}>
<div>This is my content</div>
</Tilty>In order to add a parallax effect to the element and it's child, you must add some css properties to them:
- Add
transform-style: preserve-3dto your tilt element - Add
transform: translateZ(Npx)to your child element (this pixel valueNcan be increased to cause the child element to feel more separated)
<Tilty style={{ transformStyle: 'preserve-3d' }}>
<div style={{ transform: 'translateZ(30px)' }}></div>
</Tilty>You can pass callback functions for the 3 mouse events, onMouseEnter, onMouseMove, and onMouseLeave. There is also a custom callback onTiltChange for the tiltChange event that is called the Tilty component. This is changed in version 2 from having to manually add en event listener to the dom elements tiltChange event, however you can still do this if you'd like.
<Tilty
onMouseEnter={(e) => {
console.log(e);
}}
onMouseMove={(e) => {
console.log(e);
}}
onMouseLeave={(e) => {
console.log(e);
}}
onMouseLeave={(e) => {
console.log(e);
}}
onTiltChange={(e) => {
console.log(e.detail);
// {
// tiltX: "-4.90",
// tiltY: "3.03",
// percentageX: 64,
// percentageY: 58.666,
// angle: 121.751281
// }
}}
>
<div>This is my content</div>
</Tilty>componentDidMount() {
const tilt = document.querySelector('#tilty');
tilt.addEventListener("tiltChange", e => {
console.log(e.detail);
// {
// tiltX: "-4.90",
// tiltY: "3.03",
// percentageX: 64,
// percentageY: 58.666,
// angle: 121.751281
// }
});
}- tilt.js created by Gijs Rogé
- vanilla-tilt.js created by Șandor Sergiu