Animation Techniques

Decision-tree routing for animation pattern selection

Invocation Triggers

Invoke this skill when:

• User mentions "animation", "transition", "morph", "effect"
• Implementing UI state changes with visual feedback
• Choosing between animation libraries (motion.dev vs anime.js vs CSS)
• Designing multi-phase or orchestrated animations
• Text-based animations or character effects

Questionnaire: Animation Type Selection

Q1: What is being animated?
├─[A] Text/Characters → Q2
├─[B] Layout/Position → Q4
├─[C] Color/Opacity → Q5
├─[D] Shape/SVG → Q6
└─[E] Complex orchestration → Q7

Q2: Text animation type?
├─[A] Entrance/Exit → Use motion.dev AnimatePresence
├─[B] Character-by-character → Q3
├─[C] Typewriter effect → Use anime.js irregular playback
└─[D] Content change (A→B) → TEXT MORPH TECHNIQUE
    └─► Ref: techniques/text-morph-animation.md

Q3: Character animation complexity?
├─[A] Simple stagger (fade in/out) → motion.dev + staggerChildren
├─[B] Position scramble → anime.js splitText + stagger
├─[C] Multi-phase morph → TEXT MORPH TECHNIQUE
└─[D] Continuous loop → anime.js timeline + loop:true

Q4: Layout animation type?
├─[A] Enter/Exit presence → motion.dev AnimatePresence
├─[B] Shared element → motion.dev layoutId
├─[C] Reorder list → motion.dev Reorder
├─[D] Staggered grid → anime.js stagger({ grid: [x,y] })
└─[E] Physics-based → motion.dev spring transition

Q5: Color/Opacity animation?
├─[A] Simple fade → CSS transition (prefer)
├─[B] Color interpolation → motion.dev (handles color spaces)
├─[C] Gradient animation → anime.js (better gradient support)
└─[D] Filter effects → motion.dev filter prop

Q6: Shape/SVG animation?
├─[A] Path morphing → anime.js SVG module
├─[B] Draw/stroke → anime.js strokeDashoffset
├─[C] Simple transform → motion.dev
└─[D] Complex path → Consider GSAP or anime.js

Q7: Complex orchestration?
├─[A] Sequential phases → anime.js createTimeline
├─[B] Parallel + stagger → anime.js timeline.add(..., offset)
├─[C] React-coordinated → motion.dev variants + staggerChildren
└─[D] Imperative control → anime.js (better control API)

Decision Tree: Library Selection

                    ┌─────────────────────────────────┐
                    │    ANIMATION REQUIREMENT        │
                    └───────────────┬─────────────────┘
                                    │
            ┌───────────────────────┼───────────────────────┐
            │                       │                       │
            ▼                       ▼                       ▼
    ┌───────────────┐      ┌───────────────┐      ┌───────────────┐
    │ React State   │      │ DOM Direct    │      │ Complex       │
    │ Driven        │      │ Manipulation  │      │ Orchestration │
    └───────┬───────┘      └───────┬───────┘      └───────┬───────┘
            │                       │                       │
            ▼                       ▼                       ▼
    ┌───────────────┐      ┌───────────────┐      ┌───────────────┐
    │ motion.dev    │      │ anime.js v4   │      │ anime.js v4   │
    │ (motion/react)│      │ or CSS        │      │ timeline      │
    └───────────────┘      └───────────────┘      └───────────────┘
            │                       │                       │
            ▼                       ▼                       ▼
    ┌───────────────────────────────────────────────────────────┐
    │                      COMPLEXITY CHECK                      │
    └───────────────────────────────────────────────────────────┘
            │                       │                       │
    ┌───────┴───────┐       ┌───────┴───────┐       ┌───────┴───────┐
    │ Simple        │       │ Medium        │       │ High          │
    │ (1-2 props)   │       │ (3-5 props)   │       │ (6+ props or  │
    │               │       │               │       │ multi-phase)  │
    └───────┬───────┘       └───────┬───────┘       └───────┬───────┘
            │                       │                       │
            ▼                       ▼                       ▼
    ┌───────────────┐      ┌───────────────┐      ┌───────────────┐
    │ CSS transition│      │ motion.dev    │      │ anime.js      │
    │ (if possible) │      │ (default)     │      │ createTimeline│
    └───────────────┘      └───────────────┘      └───────────────┘

Decision Tree: Text Animation

                    ┌─────────────────────────────────┐
                    │      TEXT ANIMATION NEED        │
                    └───────────────┬─────────────────┘
                                    │
                    ┌───────────────┼───────────────┐
                    │               │               │
                    ▼               ▼               ▼
            ┌───────────┐   ┌───────────┐   ┌───────────┐
            │ Entrance/ │   │ Content   │   │ Continuous│
            │ Exit      │   │ Change    │   │ Effect    │
            └─────┬─────┘   └─────┬─────┘   └─────┬─────┘
                  │               │               │
          ┌───────┴───────┐       │       ┌───────┴───────┐
          │               │       │       │               │
          ▼               ▼       │       ▼               ▼
    ┌───────────┐   ┌───────────┐ │ ┌───────────┐   ┌───────────┐
    │ Whole     │   │ Per-char  │ │ │ Typewriter│   │ Scramble/ │
    │ element   │   │ stagger   │ │ │ reveal    │   │ glitch    │
    └─────┬─────┘   └─────┬─────┘ │ └─────┬─────┘   └─────┬─────┘
          │               │       │       │               │
          ▼               ▼       │       ▼               ▼
    ┌───────────┐   ┌───────────┐ │ ┌───────────┐   ┌───────────┐
    │motion.dev │   │ anime.js  │ │ │ anime.js  │   │ anime.js  │
    │Animate    │   │ splitText │ │ │ irregular │   │ timeline  │
    │Presence   │   │ + stagger │ │ │ playback  │   │ + random  │
    └───────────┘   └───────────┘ │ └───────────┘   └───────────┘
                                  │
                                  ▼
                    ┌─────────────────────────────────┐
                    │     SAME LENGTH OR DIFFERENT?   │
                    └───────────────┬─────────────────┘
                                    │
                    ┌───────────────┼───────────────┐
                    │               │               │
                    ▼               ▼               ▼
            ┌───────────┐   ┌───────────┐   ┌───────────┐
            │ Same      │   │ Growing   │   │ Shrinking │
            │ length    │   │ (+chars)  │   │ (-chars)  │
            └─────┬─────┘   └─────┬─────┘   └─────┬─────┘
                  │               │               │
                  └───────────────┼───────────────┘
                                  │
                                  ▼
                    ┌─────────────────────────────────┐
                    │       TEXT MORPH TECHNIQUE      │
                    │                                 │
                    │  Phase 1: Fade out unmapped     │
                    │  Phase 2: Compress remaining    │
                    │  Phase 3: Scramble to target    │
                    │  Phase 4: Fade in new chars     │
                    │                                 │
                    │  ► techniques/text-morph-       │
                    │    animation.md                 │
                    └─────────────────────────────────┘

Quick Reference: Library Capabilities

Technique Index

Full catalog: See techniques/INDEX.md for all documented techniques.

Integration Checklist

When implementing animations:

• Check prefers-reduced-motion - skip or simplify
• Consider mobile performance - reduce particle counts
• Use hardware acceleration - transform over top/left
• Clean up on unmount - cancel pending animations
• Test with DevTools → Performance → 6x slowdown

Related

• Navigation: AGENTS.md (agent instructions for this skill)
• Techniques: techniques/INDEX.md (full technique catalog)
• Beads: tmnl-ypwpb (Text Morph feature)
• Skills: /effect-atom-integration (for animation state)
• Submodules: ../../submodules/anime/ (anime.js v4 source)