DEV Community

Koji (he/him)
Koji (he/him)

Posted on

Create a Tilt Hover Effect Card with react-vanilla-tilt & react-parallax-tilt

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.

GitHub logo 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>
Enter fullscreen mode Exit fullscreen mode

 

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
Enter fullscreen mode Exit fullscreen mode

react-vanilla-tilt is based on vanilla-tilt.js.

GitHub logo micku7zu / vanilla-tilt.js

A smooth 3D tilt javascript library.

vanilla-tilt.js

npm version

A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).

View landing page (demos)

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>
Enter fullscreen mode Exit fullscreen mode

If you want to use this library in IE, you need to include a CustomEvent polyfill: https://github.com/micku7zu/vanilla-tilt.js/issues/49#issuecomment-482711876 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.
    scale
Enter fullscreen mode Exit fullscreen mode

[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.

GitHub logo mkosir / react-parallax-tilt

👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies

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
Enter fullscreen mode Exit fullscreen mode

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: 
Enter fullscreen mode Exit fullscreen mode

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!!!

Discussion (0)