Framer Motion Ui

Modal Animations

"use client";
import { motion, AnimatePresence } from "framer-motion";

const backdropVariants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};

const modalVariants = {
  hidden: { opacity: 0, scale: 0.96, y: 16 },
  visible: { opacity: 1, scale: 1, y: 0 },
  exit: { opacity: 0, scale: 0.96, y: 8 },
};

export function Modal({ isOpen, children }: ModalProps) {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            className="modal-backdrop"  // z-index: 30
            variants={backdropVariants}
            initial="hidden"
            animate="visible"
            exit="hidden"
            transition={{ duration: 0.2 }}
          />
          <motion.div
            className="modal-dialog"  // z-index: 40
            variants={modalVariants}
            initial="hidden"
            animate="visible"
            exit="exit"
            transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
          >
            {children}
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}

Card / List Item Animations

Stagger children for list rendering:

"use client";
import { motion } from "framer-motion";

const containerVariants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.08 } },
};

const itemVariants = {
  hidden: { opacity: 0, y: 12 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.3, ease: "easeOut" } },
};

export function ScholarshipList({ items }: Props) {
  return (
    <motion.ul variants={containerVariants} initial="hidden" animate="visible">
      {items.map((item) => (
        <motion.li key={item.id} variants={itemVariants}>
          {/* card content */}
        </motion.li>
      ))}
    </motion.ul>
  );
}

Hover & Tap Effects

<motion.button
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.98 }}
  transition={{ type: "spring", stiffness: 400, damping: 20 }}
>
  Apply Now
</motion.button>

Loading / Skeleton States

"use client";
import { motion } from "framer-motion";

export function SkeletonCard() {
  return (
    <motion.div
      className="skeleton-card"
      animate={{ opacity: [0.5, 1, 0.5] }}
      transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
    />
  );
}

Z-Index Alignment (Framer Motion)

Framer Motion's transform property creates new stacking contexts. Always pair with correct z-index tokens:

/* In CSS modules or global styles */
.modal-backdrop { z-index: var(--z-modal-backdrop); } /* 30 */
.modal-dialog   { z-index: var(--z-modal); }           /* 40 */
.toast          { z-index: var(--z-toast); }            /* 50 */

Performance Rules

• Use will-change: transform only when necessary (can cause memory issues).
• Prefer opacity and transform for animations (GPU-accelerated).
• Avoid animating width, height, or margin — use scaleX/scaleY instead.
• Use layoutId for shared element transitions (e.g., tab underline animations).

Required: Client Boundary

Any component using Framer Motion MUST have "use client" at the top. Never use motion components in Server Components.