dev-resources.site
for different kinds of informations.
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.
Featured ones: