🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

React version of tilt.js, which helps you create 60+fps parallax tilt hover effect.

Animation React

Documentation

React.js - Tilt.js

Travis CI

react-tilt demo gif

React version of tilt.js

Demo

https://vx-demo.now.sh/gallery

Install

  • yarn: yarn add react-tilt
  • npm: npm install --save react-tilt

Usage

import Tilt from 'react-tilt'  <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


You May Also Like