Comment implementer des animations avec Claude Code

Optimiser l’implementation des animations avec Claude Code

Les animations web ameliorent considerablement l’experience utilisateur, mais leur implementation necessite des connaissances specialisees. Avec Claude Code, il suffit de dire “je veux un effet de fade in” ou “je veux afficher des elements au scroll” pour generer le code d’animation adequat.

Bases des animations CSS

D’abord, les animations realisables uniquement en CSS.

> Cree une animation CSS de fade in qui se declenche quand un element entre dans l'ecran au scroll.
> Inclus aussi un pattern de slide depuis le bas.

/* Fade in + slide vers le haut */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.6s ease-out forwards;
}

/* Etat initial masque */
.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.is-visible {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Animation echelonnee (avec delai) */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

On le combine avec Intersection Observer.

function setupScrollAnimations() {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }
  );

  document.querySelectorAll(".animate-on-scroll").forEach((el) => {
    observer.observe(el);
  });
}

document.addEventListener("DOMContentLoaded", setupScrollAnimations);

Animations avec Framer Motion

Dans les projets React, Framer Motion permet une ecriture plus declarative.

import { motion, useInView, type Variants } from "framer-motion";
import { useRef } from "react";

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
};

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

export function AnimatedList({ items }: { items: string[] }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-50px" });

  return (
    <motion.ul
      ref={ref}
      variants={containerVariants}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      className="space-y-4"
    >
      {items.map((item, i) => (
        <motion.li key={i} variants={itemVariants} className="p-4 bg-white rounded-lg shadow">
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

Transitions de page

Animations lors de la navigation entre les pages.

import { motion, AnimatePresence } from "framer-motion";
import { useRouter } from "next/router";

const pageVariants: Variants = {
  initial: { opacity: 0, x: -20 },
  animate: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: 20 },
};

export function PageTransition({ children }: { children: React.ReactNode }) {
  const router = useRouter();

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={router.pathname}
        variants={pageVariants}
        initial="initial"
        animate="animate"
        exit="exit"
        transition={{ duration: 0.3, ease: "easeInOut" }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

Animations de chargement

export function SkeletonLoader({ lines = 3 }: { lines?: number }) {
  return (
    <div className="space-y-3 animate-pulse">
      {Array.from({ length: lines }).map((_, i) => (
        <div
          key={i}
          className="h-4 bg-gray-200 rounded"
          style={{ width: `${100 - i * 15}%` }}
        />
      ))}
    </div>
  );
}

export function SpinnerLoader({ size = "md" }: { size?: "sm" | "md" | "lg" }) {
  const sizeClasses = { sm: "h-4 w-4", md: "h-8 w-8", lg: "h-12 w-12" };

  return (
    <div className={`${sizeClasses[size]} animate-spin rounded-full border-2 border-gray-300 border-t-primary-600`} />
  );
}

Pour l’integration avec un systeme de design, consultez la construction d’un systeme de design ; pour le responsive, consultez le design responsive.

Summary

Avec Claude Code, vous pouvez finaliser rapidement l’implementation des animations, des animations CSS a Framer Motion, en passant par les transitions de page et les indicateurs de chargement. Il suffit de decrire “je veux ce type de mouvement” pour que la selection technologique appropriee et la generation de code soient effectuees.

Pour plus de details, consultez la documentation officielle de Claude Code.