dev-resources.site

for different kinds of informations.

How to Create a Flipping Card Animation Using Framer Motion

Published at

12/22/2024

Categories

4 categories in total

Author

12 person written this

graciesharma

open

How to Create a Flipping Card Animation Using Framer Motion

Link video : Flipping Card

Framer Motion is a popular library for creating smooth and customizable animations in React. In this blog, we’ll walk through the steps to create a visually appealing flipping card animation. This card will flip between its front and back sides at regular intervals, using Framer Motion's powerful features.

Prerequisites
Before diving into the code, ensure you have the following:

Basic knowledge of React.
A React project set up (using tools like Create React App or Next.js).
Framer Motion installed in your project.
You can install it with:
npm install framer-motion

"use client";

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import CardFront from "./card-front";
import CardBack from "./card-back";

const FlippingCard = () => {
  const [isFlipped, setIsFlipped] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setIsFlipped((prev) => !prev);
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
      className="card-container"
      style={{
        width: "454px",
        height: "271px",
        perspective: "1000px", // Adds depth for 3D animation
      }}
    >
      <motion.div
        className="card"
        animate={{ rotateY: isFlipped ? 180 : 0 }} // Animates the flip
        transition={{ duration: 1 }} // Controls the flip speed
        style={{
          width: "100%",
          height: "100%",
          position: "relative",
          transformStyle: "preserve-3d", // Enables 3D effect
        }}
      >
        {/* Front Side */}
        <motion.div
          className="card-front"
          style={{
            position: "absolute",
            backfaceVisibility: "hidden", // Ensures only one side is visible
            width: "100%",
            height: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <CardFront />
        </motion.div>

        {/* Back Side */}
        <motion.div
          className="card-back"
          style={{
            position: "absolute",
            backfaceVisibility: "hidden",
            transform: "rotateY(180deg)", // Flips the back face
            width: "100%",
            height: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <CardBack />
        </motion.div>
      </motion.div>
    </motion.div>
  );
};

export default FlippingCard;

Key Features of This Component

3D Effect with Perspective:The perspective property in the outer container ensures the flipping motion feels realistic by adding depth.

Dynamic Rotation: The rotateY property toggles between 0 (front) and 180 (back) degrees to create the flip animation.

Smooth Animation: The transition property in Framer Motion controls the flip speed and smoothness.

Automatic Flip: A setInterval hook toggles the isFlipped state every 2 seconds for continuous flipping. You can replace this with user-triggered events like onClick or onHover.

Backface Visibility: backfaceVisibility: hidden ensures that only the visible side is displayed while flipping.

How to Customize the Flipping Card

Content: Replace CardFront and CardBack components with custom designs or dynamic content.

Dimensions: Modify width and height in the styles to fit your design needs.

Transition Speed: Adjust the duration in the transition property for faster or slower flips.

Flip Trigger: Replace the setInterval with an event handler.

animation Article's

30 articles in total