Animations and 3D (GSAP, Three.js)

When to Add Animations and 3D

Animations and 3D graphics are powerful tools for polish and differentiation — but they come with real tradeoffs: bundle size, performance on low-end devices, accessibility concerns, and development time.

Before reaching for an animation library, ask: does this motion help the user understand what happened, or is it just decoration? The best animations communicate state changes, guide attention, and provide feedback. Gratuitous animation slows things down and dilutes the ones that matter.

3D is expensive — both to build and to run. Use it only when it genuinely differentiates your product (a 3D product configurator, a data visualization, a creative tool). Never add Three.js to a landing page that would be cleaner without it.

CSS Animations and Transitions

The fastest, lightest option. No JavaScript, no library, no bundle cost. Handles the majority of UI animation needs.

When CSS is enough: - Hover effects, button presses - Fade in/out, slide in/out - Loading spinners - Simple entrance animations

/* Fade-in entrance */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-enter {
  animation: fade-in 200ms ease-out both;
}

/* Transition on hover */
.button {
  transition: background-color 150ms ease, transform 100ms ease;
}
.button:hover {
  transform: translateY(-1px);
}

Performance rule: Only animate transform and opacity. Animating width, height, top, left, or background forces the browser to repaint and reflow — janky on low-end devices.

Respect motion preferences:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwind CSS Animations

Tailwind includes basic animation utilities:

• animate-spin — rotating spinner
• animate-pulse — pulsing skeleton loader
• animate-bounce — bouncing element
• animate-ping — notification ping effect
• transition, duration-150, ease-out — for hover/focus transitions

For custom animations in Tailwind v4, define keyframes in your CSS theme:

@theme {
  --animate-slide-up: slide-up 300ms ease-out both;
  @keyframes slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

<div className="animate-slide-up">Content</div>

Framer Motion

Framer Motion is the most popular React animation library. It makes complex animations declarative and handles spring physics, gesture detection, layout animations, and shared element transitions.

Bundle size: ~35 KB gzipped.

Free tier: Open-source, free to use.

When to use Framer Motion: - Animated page transitions - Drag-and-drop interfaces - Complex staggered entrance animations - Layout animations (elements that change position/size) - Shared element transitions (item → detail view)

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

// Entrance animation
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3, ease: "easeOut" }}
>
  Card content
</motion.div>

// Exit animation (requires AnimatePresence wrapper)
<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.2 }}
    >
      Modal content
    </motion.div>
  )}
</AnimatePresence>

// Staggered list
const container = { hidden: {}, show: { transition: { staggerChildren: 0.05 } } };
const item = { hidden: { opacity: 0, x: -10 }, show: { opacity: 1, x: 0 } };

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map((i) => <motion.li key={i.id} variants={item}>{i.name}</motion.li>)}
</motion.ul>

Framer Motion's layout prop — automatically animates any component that changes position or size in the DOM. A powerful one-liner for reordering lists:

<motion.div layout>...</motion.div>

GSAP (GreenSock Animation Platform)

GSAP is a professional JavaScript animation library used in high-end marketing sites, interactive experiences, and creative web projects. It is framework-agnostic (works with vanilla JS, React, Vue, etc.).

Free tier: Core GSAP is free. Premium plugins (ScrollTrigger, Draggable, MorphSVG) require a membership ($99–$150/year), but ScrollTrigger is free.

Performance: GSAP is among the fastest animation libraries — it optimizes the animation loop and avoids the browser's render bottlenecks.

When to use GSAP: - Complex timeline-based animations with precise sequencing - Scroll-triggered animations (parallax, section reveals) - SVG morphing, path animations - High-end marketing landing pages where animation is the centerpiece - When you need fine-grained control that CSS and Framer Motion cannot give

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// Animate a hero element on scroll
gsap.from(".hero-headline", {
  opacity: 0,
  y: 60,
  duration: 1,
  ease: "power3.out",
  scrollTrigger: {
    trigger: ".hero-headline",
    start: "top 80%",
  },
});

// Timeline — sequence multiple animations
const tl = gsap.timeline({ delay: 0.2 });
tl.from(".nav", { y: -40, opacity: 0, duration: 0.4 })
  .from(".hero-text", { y: 30, opacity: 0, duration: 0.6 }, "-=0.2")
  .from(".hero-image", { scale: 0.9, opacity: 0, duration: 0.8 }, "-=0.4");

GSAP vs. Framer Motion:

Three.js and 3D

Three.js is the most widely used JavaScript 3D library. It provides a scene graph, camera, lighting, materials, and a renderer (WebGL-based).

Bundle size: ~600 KB uncompressed (tree-shake carefully).

When 3D is genuinely worth it: - Your product is a 3D design tool (CAD, game editor, architecture visualization) - A 3D product configurator (customize a product in 3D before buying) - Data visualization that benefits from a third dimension - A creative/portfolio site where 3D is the differentiator

When to avoid Three.js: - Landing pages — almost always better without it - When the 3D is decorative and adds no information

React Three Fiber (R3F)

React Three Fiber wraps Three.js in a React declarative API. Instead of imperative Three.js code, you declare your 3D scene as JSX:

import { Canvas } from "@react-three/fiber";
import { OrbitControls, Box } from "@react-three/drei";

export function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} />
      <Box args={[1, 1, 1]}>
        <meshStandardMaterial color="#d4af37" />
      </Box>
      <OrbitControls />
    </Canvas>
  );
}

Drei — a collection of helpers for R3F (orbit controls, loading models, text, etc.).

Spline

Spline is a no-code 3D design tool that lets you export interactive 3D scenes as embeddable React components or <iframe> tags. No Three.js knowledge required.

Free tier: Unlimited scenes; watermark on exports (remove with $9/month Pro).

When to use Spline: You want a 3D element on a landing page or product page but do not want to write 3D code. Spline is significantly faster for designers and non-technical founders.

Animation Library Comparison

Performance Guidelines

• Use CSS transitions and Framer Motion for UI interactions — they are fast and accessible
• Only use GSAP or Three.js when you have measured that simpler tools do not meet the need
• Lazy-load heavy animation libraries: const GSAP = dynamic(() => import("./gsap-component"), { ssr: false })
• Test on a low-end Android device — what is smooth on a MacBook Pro may be janky on a $200 phone
• Always include prefers-reduced-motion support for users who find motion distracting or triggering
• Avoid backdrop-filter: blur() on sticky/fixed elements — it forces GPU composition on every scroll frame and degrades performance on mobile