Animation

Framer Motion

Declarative animations and gestures for React.

Live demoframer-motion

Drag me

Framer Motion is the React-first animation library for gestures, layout animations, and page transitions. whileHover, whileTap, and drag cover the 90% of interactive motion with almost no setup.

Install

npm i framer-motion

Snippet

import { motion } from "framer-motion";

export function Card() {
  return (
    <motion.div
      drag
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.97 }}
      dragConstraints={{ left: -60, right: 60, top: -40, bottom: 40 }}
      className="rounded-2xl bg-iris-gradient p-8"
    >
      Drag me
    </motion.div>
  );
}