OpenSkillIndex← back to search
claude-codedevelopment

Claude-skill-registry animation-techniques

Animation Techniques

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/animation-techniques" ~/.claude/skills/majiayu000-claude-skill-registry-animation-techniques && rm -rf "$T"
manifest: skills/data/animation-techniques/SKILL.md
tags
#animation-selection#library-choice#motion-design#animation-patterns#ui-animations
source content

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

Capabilitymotion.devanime.js v4CSS
React integrationNativeManualNative
AnimatePresence✓--
Layout animations✓--
Shared elements✓--
Text splitting-✓ splitText-
Timeline-✓ createTimeline-
Grid stagger-✓ stagger({grid})-
SVG morphing-✓-
Spring physics✓✓-
Reduced motion✓ useReducedMotionManual✓ prefers-reduced-motion

Technique Index

TechniqueWhen to UseReference
Text MorphTransitioning between different text content
techniques/text-morph-animation.md
Stagger GridAnimating grid items with wave effectanime.js docs
Layout SharedElements moving between containersmotion.dev layoutId
PresenceElements entering/exiting DOMmotion.dev AnimatePresence

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)