Animazioni in React con react-tilt

react-tilt è una delle varie libreria per React per creare animazioni.

In realtà è molto focalizzata su un tipo di animazione, ma può essere comodo conoscerla.

In questo articolo vediamo un esempio.

Possiamo installarla con npm:

npm i react-tilt

Qui sotto un esempio:

import React from 'react';
import {Tilt} from 'react-tilt';

function App() {

  const defaultOptions = {
    reverse: false,
    max: 35,
    perspective: 1000,
    scale: 1.1,
    speed: 1000,
    transition: true,
    axis: null,
    reset: true,
    easing: "cubic-bezier(.03,.98,.52,.99)",
  };

  return (
      <div style={{textAlign: 'center', padding: '50px'}}>
        <Tilt options={defaultOptions}
              style={{
                height: 250,
                width: 250,
                margin: 'auto',
                border: '2px solid black',
                borderRadius: 5,
                background: 'grey',
              }}>
          <div>
            QUALCOSA!
          </div>
        </Tilt>
      </div>
  );
}

export default App;

Enjoy!