Module 3.1 — animation-designer | Skill Design

🧩 What it is / what it does

Main Concept

O animation-designer is a skill specializing in web animations, transitions, and motion design. It masters two complementary ecosystems: Framer Motion (for React) and CSS Animations/Keyframes — producing everything from subtle micro-interactions to complete page transitions.

The skill covers the entire motion pipeline in interfaces: fade-ins, staggered lists (staggered), modals with spring physics, parallax while scrolling, animated counters, loaders, drag-and-drop with inertia and notifications with an animated badge. Each pattern follows performance best practices (GPU compositing, will-change, respect for prefers-reduced-motion).

With Framer Motion

▸Fade in / slide when mounting the component (initial/animate/exit)
▸Staggered lists with staggerChildren
▸Modals with spring physics (AnimatePresence)
▸Full-page transitions
▸Drag and drop with useDragControls
▸Animated counters with useTransform

With CSS / Tailwind

▸Custom keyframe animations
▸Tailwind classes: animate-spin, animate-bounce, animate-pulse
▸Skeleton loaders with pulse
▸Scroll progress indicator
▸Parallax with useScroll + useTransform
▸Success checkmark and notification badge

Framer Motion

React animation lib

CSS Keyframes

Native animation

Easing

Motion curves

Motion Design

UX in motion

🎣 When it triggers

Claude invokes the animation-designer when it detects keywords related to movement, transitions, or motion design in your request. The skill is specialized — not called for just any CSS, only when animation is the focus.

Common trigger timeline

Explicit animation request

"add animation", "create a transition", "animate this component", "motion design", "Framer Motion"

Behavioral components

"modal that slides in", "button with animated hover", "list that appears in staggered order", "loading spinner"

Scroll and parallax

"element appears on scroll", "parallax in the hero", "reading progress bar"

Microinteractions

"success checkmark", "pulsing number badge", "visual feedback on click"

Page transitions

"fade navigation between routes", "page transition with AnimatePresence", "route that slides"

💡

Activation tip

Be specific in your request: say which component to animate, which technology you prefer (Framer Motion or plain CSS), and the desired effect. The skill produces ready-to-paste code, not generic instructions.

Direct Trigger

"animate", "transition"

Implicit Trigger

Modal, spinner, fade

Scroll-based

useScroll, parallax

Microinteraction

Checkmark, badge

🚀 How it improves your pages

📊 Impact on UX metrics

+40%

Perceived quality through well-calibrated micro-interactions

−60%

Loading feel with animated skeleton loaders

100%

Accessibility with prefers-reduced-motion

✓ DO with animation-designer

✓Fade in cards as they enter the viewport (scroll-triggered)
✓Staggered lists to guide the user's eye
✓Spring physics in modals for a tactile feel
✓Skeleton loader while fetching data
✓Reading progress bar at the top of the page

✗ AVOID when animating

✗Animate width/height directly (causes reflow)
✗Duration over 500ms for micro-interactions
✗Forget @media (prefers-reduced-motion)
✗Animate opacity + transform without will-change in long lists
✗Endless looping without purpose (distracts and wears you out)

The biggest difference lies in perceived responsiveness: an interface that animates feedback for actions (click, hover, submit) feels faster and more reliable, even when the actual timing is identical. The skill ensures every animation has a functional purpose, not just a decorative one.

⚡

Performance first

The skill prioritizes animating only GPU-composited properties: transform e opacity. Never animates top/left/margin/width directly — this triggers layout thrashing.

GPU Compositing

transform + opacity

Perceived Speed

Subjective UX

Ideal duration

150ms–400ms

Reduced Motion

Accessibility

⚙️ How it works under the hood

Core

• Framer Motion
• CSS Animations / Keyframes
• React (motion.*)
• Tailwind Animation Classes

Main APIs

• motion.div, AnimatePresence
• useScroll, useTransform
• useMotionValue
• useDragControls

Delivered patterns

• Fade In on Mount
• Staggered List
• Modal with spring animation
• Page Transition
• Scroll-triggered
• Drag and Drop

Installation

npm install framer-motion

// Uso básico em React
import { motion, AnimatePresence } from 'framer-motion';

Anatomy of an animation

<motion.div
  initial={{ opacity: 0, y: 20 }}     // estado inicial
  animate={{ opacity: 1, y: 0 }}      // estado final
  exit={{ opacity: 0, y: -20 }}       // saída (AnimatePresence)
  transition={{ duration: 0.3, ease: 'easeOut' }}
>
  Conteúdo animado
</motion.div>

✓ Internal best practices

✓Always includes a block @media (prefers-reduced-motion)
✓Uses semantic easing: easeOut for entrances, easeIn for exits
✓Duration: 150–300ms for micro-interactions, 300–500ms for transitions
✓Preference for transform + opacity (zero layout thrashing)

✗ Patterns avoided

✗Animate width, height, top, left
✗Endless loops without a UX justification
✗Duration over 500ms for frequent interactions
✗Ignore focus state / keyboard accessibility

motion.*

Animatable components

AnimatePresence

Exit animation

useScroll

Scroll-based animation

staggerChildren

Staggered delay

💬 Practical example + Ready-to-use prompt

Here’s a real-world scenario: you have a list of product cards in React and want each card to appear in sequence as you scroll down the page. Here’s the optimized prompt and the code the skill produces.

Prompt ready to paste into Claude Code

Use o skill animation-designer para adicionar animação à lista
de cards de produto no componente ProductList.tsx (React + Tailwind).

Requisitos:
- Cada card deve fade in + slide-up ao entrar na viewport (scroll-triggered)
- Stagger de 0.1s entre cada card
- Duração de 0.4s com easing easeOut
- Usar Framer Motion (já instalado)
- Incluir suporte a prefers-reduced-motion
- Não alterar layout ou estilos existentes, só adicionar animação

Resulting code — Staggered List with scroll trigger

import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

// Variantes para o container (stagger)
const containerVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.1 }
  }
};

// Variantes para cada card
const cardVariants = {
  hidden: { opacity: 0, y: 24 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4, ease: 'easeOut' }
  }
};

export function ProductList({ products }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-60px' });

  return (
    <motion.ul
      ref={ref}
      variants={containerVariants}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      className="grid grid-cols-3 gap-4"
    >
      {products.map(p => (
        <motion.li key={p.id} variants={cardVariants}>
          <ProductCard product={p} />
        </motion.li>
      ))}
    </motion.ul>
  );
}

🎯

Pro tip: once: true

Pass once: true in the useInView so the animation triggers only the first time the element enters the screen. Without this, the element re-animates every time it leaves and re-enters the viewport — usually undesirable.

useInView

Scroll trigger

variants

Named states

staggerChildren

0.1s delay

once: true

Animate only once

🧬 Works well with / Limitations

Which skills it works with

✨

impeccable

T1 · Build

O impeccable also applies animations—specifically CSS transitions and final-polish micro-interactions (hover states, focus rings, color transitions). The combination is powerful: impeccable handles the overall visual polish, animation-designer handles more elaborate motion design (scroll, spring, stagger, drag). Use impeccable first to establish the visual foundation; then call animation-designer for more complex motion layers.

🌀

algorithmic-art

T2 · Identity

O algorithmic-art generates generative art with p5.js and canvas. Combining it with animation-designer creates visuals that bring together procedural generation (shapes, particles, Perlin noise) and interface motion design (entrance transitions, hover feedback). Use case: generative animated backgrounds with p5.js + component transitions with Framer Motion on the same page.

🖱️

3d-animation-creator

T3 · Media · Next

O 3d-animation-creator is the next module in this learning path: it expands motion design into the Z axis, working with Three.js, WebGL, and 3D browser animations. The distinction is clear: animation-designer dominates 2D space (UI, transitions, scrolling), while 3d-animation-creator handles 3D scenes, meshes, materials, and cameras. Use them together when you need an animated interface (2D) that integrates a 3D hero or background.

⚠️ Limitations — when NOT to use it

✗Video and frame export: to create videos rendered from React components, use the skill remotion (module 3.3). animation-designer animates in the browser; it doesn't export video files.
✗Complex 3D animations: Three.js scenes, meshes, shaders, and orbital cameras are the domain of 3d-animation-creator, not this skill.
✗Generative art with canvas/p5: pure procedural generation (fractals, noise, mathematical particle systems) is the work of algorithmic-art.
✗Projects without React/CSS: The skill is geared toward React (Framer Motion) and modern CSS. For animations in native contexts (iOS, Android) or game engines, it's not the right tool.

Map of responsibilities in Learning Path 3

3.1 animation-designer

2D · UI · Framer Motion · CSS

3.2 3d-animation-creator

3D · WebGL · Three.js

3.3 remotion

React → Video · Export

3.4 seedance + HyperFrames

FFmpeg · Media pipelines

+ impeccable

Polish → Motion

+ algorithmic-art

p5.js + Framer

+ 3d-animation

2D UI + 3D hero

NOT for video

Use remotion

📋 Module 3.1 Summary

What you learned

✓O animation-designer specializes in web animations with Framer Motion and CSS
✓Covers fade, slide, stagger, spring, scroll, parallax, drag, and micro-interactions
✓Triggers for explicit requests involving animation, motion design, or Framer Motion
✓Always includes prefers-reduced-motion and uses transform+opacity for performance
✓Main APIs: motion.*, AnimatePresence, useScroll, useTransform, useDragControls
✓Works with impeccable (polish), algorithmic-art (p5.js) and 3d-animation-creator (Three.js)
✓Is NOT a substitute for video (remotion) or 3D art (3d-animation-creator)

Next module

🖱️

3.2 — 3d-animation-creator

Three.js, WebGL, and 3D animations in the browser. From a flat interface to three-dimensional space.

🎬

Track 3 — Media

This track covers the entire motion and media layer: from UI animations (3.1) to video pipelines with FFmpeg (3.4). Each module expands the motion axis in a different direction.

←Back to Track 3 Next Module→