Home/ Questions/Q 484
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T01:49:02+00:00 In:

How do you handle complex animations?

  • 0
  • 0

An explanation of complex animations in React.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Anthony Harding
    Beginner

    Handling complex animations in React.js can be streamlined using libraries like Framer Motion, which offers powerful and declarative APIs for animations.

    Why Framer Motion?

    • Simple and declarative syntax.
    • Supports complex sequences, gestures, drag animations, and layout transitions.
    • Easily integrates with React components.

    Example: Complex Animation with Sequential Transitions & Hover Effects

    This example demonstrates:

    1. Initial mount animation.
    2. Hover effect.
    3. Sequential child animations.
    4. Exit animation on unmount.
    import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";

const ComplexAnimation = () => {
const [isVisible, setIsVisible] = useState(true);

// Parent container animation
const containerVariants = {
hidden: { opacity: 0, scale: 0.8 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.3,
staggerChildren: 0.2,
},
},
exit: { opacity: 0, scale: 0.5, transition: { duration: 0.5 } },
};
// Child items animation

const itemVariants = {
hidden: { y: 20, opacity: 0 },
visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
};

return (

<div className="flex flex-col items-center justify-center h-screen">
<button
onClick={() => setIsVisible((prev) => !prev)}
className="mb-6 px-4 py-2 bg-blue-500 text-white rounded-lg"
>
Toggle Animation
</button>

<AnimatePresence>

{isVisible && (
<motion.div
className="w-64 p-6 bg-gray-100 rounded-lg shadow-lg"
variants={containerVariants}
initial="hidden"
animate="visible"
exit="exit"
whileHover={{ scale: 1.1 }}
>
{["Item 1", "Item 2", "Item 3"].map((item, index) => (
<motion.div
key={index}
className="p-3 bg-white rounded-md mb-2 shadow"
variants={itemVariants}
whileHover={{ scale: 1.05, backgroundColor: "#e0f7fa" }}
>
{item}
</motion.div>
))}
</motion.div>
)}
</AnimatePresence>
</div>


);
};

export default ComplexAnimation;

    Explanation of Key Features:

    1. motion.div — Wraps the component to make it animatable.
    2. Variants — Define states (hidden, visible, exit) for reusable animations.
    3. AnimatePresence — Handles animations when components unmount.
    4. whileHover — Adds interactivity (hover effects).
    5. Staggered Animations — staggerChildren creates sequential animations for child elements.

    To Run:

    1. Install Framer Motion:

      npm install framer-motion

    2. Run the component and click the “Toggle Animation” button to see mount/unmount animations and hover effect