0.1.7 • Published 1 year ago
react-tilting v0.1.7
React.js - Tilt.js
React version of tilt.js
DISCLAIMER
This package is a fork of react-tilt, updated to work with newer React versions. The original author is Jonathan Dion. Feel free to contribute by creating a pull request!
Install
- npm:
npm install --save react-tilting
Usage
import Tilt from 'react-tilting'
<Tilt className="Tilt" options={{ max : 25 }} style={{ height: 250, width: 250 }} >
<div className="Tilt-inner"> 🥝 </div>
</Tilt>
Options
{
reverse: false, // reverse the tilt direction
max: 35, // max tilt rotation (degrees)
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1.1, // 2 = 200%, 1.5 = 150%, etc..
speed: 1000, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
}
API
Property | Signature |
---|---|
onMouseEnter | () -> SyntheticEvent |
onMouseMove | () -> SyntheticEvent |
onMouseLeave | () -> SyntheticEvent |
options | Object |
Roadmap
- Tests
- Add Flare effect
Alternatives
- JQuery JS version: https://github.com/gijsroge/tilt.js
- Vanilla JS version: https://github.com/micku7zu/vanilla-tilt.js