Cara Mengimplementasikan Animasi dengan Claude Code

Mengefisienkan Implementasi Animasi dengan Claude Code

Animasi web sangat meningkatkan pengalaman pengguna, tetapi implementasinya memerlukan pengetahuan khusus. Dengan Claude Code, cukup sampaikan “ingin fade in” atau “ingin menampilkan elemen saat scroll” dan kode animasi yang tepat akan di-generate.

Dasar-dasar CSS Animation

Pertama, mari lihat animasi yang bisa dicapai hanya dengan CSS.

> Buat CSS animation yang fade in saat masuk ke layar saat scroll.
> Juga pattern yang menampilkan dengan slide dari bawah.

/* Fade in + Slide up */
@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;
}

/* State awal tersembunyi */
.animate-on-scroll {
  opacity: 0;
}

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

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

Dikombinasikan dengan 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);

Animasi dengan Framer Motion

Di project React, menggunakan Framer Motion memungkinkan penulisan yang lebih deklaratif.

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>
  );
}

Page Transition

Animasi saat perpindahan halaman.

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>
  );
}

Animasi Loading

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`} />
  );
}

Untuk integrasi dengan design system, lihat Membangun Design System, dan untuk dukungan responsif, lihat Responsive Design.

Summary

Dengan Claude Code, implementasi animasi mulai dari CSS animation, Framer Motion, page transition, hingga tampilan loading bisa diselesaikan dalam waktu singkat. Cukup sampaikan “ingin menambahkan gerakan seperti ini” dan pemilihan teknologi yang tepat serta code generation akan dilakukan.

Untuk detail, lihat Dokumentasi Resmi Claude Code.