This post will explain how to create a card that has tilt hover effect with reactjs and react-vanilla-tilt.
The library this post used is the following.
siddharthkp
/
react-vanilla-tilt
React wrapper around vanilla-tilt
A smooth 3D tilt React component wrapped around vanilla-tilt.js
install
npm install react-vanilla-tilt
usage
import React from 'react'
import Tilt from 'react-vanilla-tilt'
<Tilt>
<div>
You can put whatever you want inside this
</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, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // 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.
glare…react-vanilla-tilt is based on vanilla-tilt.js.
micku7zu
/
vanilla-tilt.js
A smooth 3D tilt javascript library.
vanilla-tilt.js
A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).
Usage
<body>
<!-- your markup element -->
<div class="your-element" data-tilt></div>
<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body>
If you want to use this library in IE, you need to include a CustomEvent polyfill: #49 (comment) or maybe consider the jQuery version.
Options
{
reverse: false, // reverse the tilt direction
max: 15, // max tilt rotation (degrees)
startX: 0, // the starting tilt on the X axis, in degrees.
startY: 0, // the starting tilt on the Y axis, in degrees.
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.…[document]
https://micku7zu.github.io/vanilla-tilt.js/
[myCode]
https://codesandbox.io/s/polished-breeze-rrbsx?file=/src/App.js:1216-1234
The thing is that react-vanilla-tilt is easy to use, but it hasn't been updated more than 3 years. Probably, for many of us, it won't the first choice.
Then I found another similar library, react-parallax-tilt. The way to use the lib is very similar to react-vanilla-tilt. The difference would be some props.
mkosir
/
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
React Tilt
👀 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
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…Also, react-parallax-tilt is great because it offers Storybook which is awesome!
https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--default
Here is the sample code on codesandbox.io
[myCode]
https://codesandbox.io/s/happy-moon-fh9gk?file=/src/App.js
I will use react-parallax-tilt to add tilt effect to my website!!!
Top comments (0)