Skip to content
Related Articles

Related Articles

Improve Article

How to create Tinder card swipe gesture using React and framer-motion ?

  • Difficulty Level : Hard
  • Last Updated : 19 Mar, 2021

We can create a simple tinder app like swipe gesture using the following approach using the Framer module in ReactJS.

Prerequisites:

  1. Knowledge of JavaScript (ES6)
  2. Knowledge of HTML/CSS.
  3. Basic knowledge of ReactJS.

Framer hooks used in building this application are:

  1. Framer useMotionValue
  2. Framer useTransform
  3. Framer useAnimation

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.



npx create-react-app tinder-swipe

Step 2: After creating your project folder i.e. tinder-swipe, move to it using the following command.

cd tinder-swipe

Step 3: After creating the ReactJS application, Install the framer modules using the following command.

npm install framer

Project structure: Our project structure tree should look like this:

Project structure

Approach:

  • We are going to use useMotionValue() to move the card as the user drags the cursor as all motion components internally use motionValues to track the state and velocity of an animating value which we’re going to get through this hook.
  • We are going to use useTransform() hook to rotate the card as the card moves on drag by chaining motionValue of the card with it.
  • Also, we are going to use useTransform() hook to change the opacity of the card as it moves by chaining it to the motionValue.
  • useAnimation() is a utility hook and is used to create animation controls (animControls) which can be used to manually start, stop and sequence animations on the card.

Example 1: 

index.js




import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { Frame, useMotionValue, useTransform, useAnimation } from "framer";
  
// Some styling for the card
const style = {
  backgroundImage: "URL(
  backgroundRepeat: "no-repeat",
  backgroundSize: "contain",
  backgroundColor: "#55ccff",
  boxShadow: "5px 10px 18px #888888",
  borderRadius: 10,
  height: 300,
};
  
const App = () => {
  // To move the card as the user drags the cursor
  const motionValue = useMotionValue(0);
  
  // To rotate the card as the card moves on drag
  const rotateValue = useTransform(motionValue, [-200, 200], [-50, 50]);
  
  // To decrease opacity of the card when swipped
  // on dragging card to left(-200) or right(200)
  // opacity gradually changes to 0
  // and when the card is in center opacity = 1
  const opacityValue = useTransform(
    motionValue,
    [-200, -150, 0, 150, 200],
    [0, 1, 1, 1, 0]
  );
  
  // Framer animation hook
  const animControls = useAnimation();
  
  return (
    <div className="App">
      <Frame
        center
        // Card can be drag only on x-axis
        drag="x"
        x={motionValue}
        rotate={rotateValue}
        opacity={opacityValue}
        dragConstraints={{ left: -1000, right: 1000 }}
        style={style}
        onDragEnd={(event, info) => {
          // If the card is dragged only upto 150 on x-axis
          // bring it back to initial position
          if (Math.abs(info.point.x) <= 150) {
            animControls.start({ x: 0 });
          } else {
            // If card is dragged beyond 150
            // make it disappear
            // making use of ternary operator
            animControls.start({ x: info.point.x < 0 ? -200 : 200 });
          }
        }}
      />
    </div>
  );
};
  
ReactDOM.render(<App />, document.getElementById("root"));

index.css




body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 
               'Segoe UI', 'Roboto', 'Oxygen',
               'Ubuntu', 'Cantarell', 'Fira Sans'
               'Droid Sans', 'Helvetica Neue',
                sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  
.App {
  text-align: center;
}
  
code {
  font-family: source-code-pro, Menlo, 
               Monaco, Consolas, 'Courier New',
    monospace;
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Tinder like card swipe gesture

Example 2:Creating a deck of cards

index.js




import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Frame, useMotionValue, useTransform, useAnimation } from 'framer';
  
// Card component with destructured props
const Card = ({ image, color }) => {
  // To move the card as the user drags the cursor
  const motionValue = useMotionValue(0);
  
  // To rotate the card as the card moves on drag
  const rotateValue = useTransform(motionValue, [-200, 200], [-50, 50]);
  
  // To decrease opacity of the card when swipped
  // on dragging card to left(-200) or right(200)
  // opacity gradually changes to 0
  // and when the card is in center opacity = 1
  const opacityValue = useTransform(
    motionValue,
    [-200, -150, 0, 150, 200],
    [0, 1, 1, 1, 0]
  );
  
  // Framer animation hook
  const animControls = useAnimation();
  
  // Some styling for the card
  // it is placed inside the card component
  // to make backgroundImage and backgroundColor dynamic
  const style = {
    backgroundImage: `url(${image})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'contain',
    backgroundColor: color,
    boxShadow: '5px 10px 18px #888888',
    borderRadius: 10,
    height: 300
  };
  
  return (
    <div className='App'>
      <Frame
        center
        // Card can be drag only on x-axis
        drag='x'
        x={motionValue}
        rotate={rotateValue}
        opacity={opacityValue}
        dragConstraints={{ left: -1000, right: 1000 }}
        style={style}
        onDragEnd={(event, info) => {
          
          // If the card is dragged only upto 150 on x-axis
          // bring it back to initial position
          if (Math.abs(info.point.x) <= 150) {
            animControls.start({ x: 0 });
          } else {
            
            // If card is dragged beyond 150
            // make it disappear
  
            // Making use of ternary operator
            animControls.start({ x: info.point.x < 0 ? -200 : 200 });
          }
        }}
      />
    </div>
  );
};
  
const App = () => {
  const cards = [
    {
      color: '#55ccff'
    },
    {
      color: '#e8e8e8'
    },
    {
      color: '#0a043c'
    },
    {
      color: 'black'
    }
  ];
  
  return (
    <div className='App'>
      
      {/* Traversing through cards arrray using map function
      and populating card with different image and color */}
        
      {cards.map((card) => (
        <Card image={card.image} color={card.color} />
      ))}
    </div>
  );
};
  
ReactDOM.render(<App />, document.getElementById('root'));

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Swipeable deck of cards




My Personal Notes arrow_drop_up
Recommended Articles
Page :