Comment animer votre app React avec Framer Motion en 2026

npx create-next-app@latest framer-motion-demo --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd framer-motion-demo
npm install framer-motion
npm run dev

import { motion } from 'framer-motion';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gradient-to-br from-blue-400 to-purple-600">
      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, ease: 'easeOut' }}
        className="text-4xl font-bold text-white mb-8"
      >
        Bienvenue à Framer Motion !
      </motion.div>
      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        className="px-8 py-4 bg-white text-blue-600 rounded-lg font-semibold shadow-lg"
      >
        Cliquez-moi
      </motion.button>
    </main>
  );
}

import { motion, useMotionValue, useSpring } from 'framer-motion';

import { useState } from 'react';

type ItemProps = { title: string; index: number };

const Item = ({ title, index }: ItemProps) => (
  <motion.li
    variants={{
      hidden: { opacity: 0, x: -50 },
      visible: (i = 1) => ({
        opacity: 1,
        x: 0,
        transition: { delay: i * 0.1 }
      })
    }}
    initial="hidden"
    animate="visible"
    custom={index}
    className="p-4 bg-white rounded shadow-md mb-2"
  >
    {title}
  </motion.li>
);

export default function AnimatedList() {
  const [items] = useState(['Élément 1', 'Élément 2', 'Élément 3']);

  return (
    <motion.ul
      initial="hidden"
      whileInView="visible"
      variants={{
        hidden: { opacity: 0 },
        visible: { opacity: 1 }
      }}
      className="w-80"
    >
      {items.map((item, index) => (
        <Item key={item} title={item} index={index} />
      ))}
    </motion.ul>
  );
}

import { motion } from 'framer-motion';

export default function SpringCard() {
  return (
    <motion.div
      initial={{ scale: 0, rotate: -180 }}
      animate={{ scale: 1, rotate: 0 }}
      transition={{
        type: 'spring',
        stiffness: 300,
        damping: 20,
        mass: 1
      }}
      whileHover={{
        scale: 1.1,
        rotate: 5,
        transition: { type: 'spring', stiffness: 400 }
      }}
      className="w-64 h-64 bg-gradient-to-r from-green-400 to-blue-500 rounded-xl shadow-2xl flex items-center justify-center text-white font-bold text-xl cursor-pointer"
    >
      Spring Magic
    </motion.div>
  );
}

import { motion, useMotionValue } from 'framer-motion';

export default function DragCard() {
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  return (
    <motion.div
      drag
      dragConstraints={{ top: -50, left: -50, right: 50, bottom: 50 }}
      dragElastic={0.2}
      style={{ x, y }}
      whileDrag={{ scale: 1.2, rotate: 10 }}
      className="w-48 h-48 bg-purple-500 rounded-lg shadow-lg flex items-center justify-center text-white font-bold cursor-grab active:cursor-grabbing"
    >
      Glissez-moi
    </motion.div>
  );
}

import { motion, useScroll, useTransform } from 'framer-motion';

import { useRef } from 'react';

export default function ScrollParallax() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end start']
  });
  const y = useTransform(scrollYProgress, [0, 1], ['0%', '-30%]);

  return (
    <section ref={ref} className="h-screen flex items-center justify-center bg-gradient-to-b from-indigo-500 to-violet-600 relative overflow-hidden">
      <motion.div
        style={{ y }}
        className="text-6xl font-black text-white drop-shadow-2xl"
      >
        Parallax
      </motion.div>
      <motion.div
        style={{ opacity: useTransform(scrollYProgress, [0, 0.5, 1], [0, 1, 0]) }}
        className="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white text-lg"
      >
        Scroll pour magie
      </motion.div>
    </section>
  );
}