Animation Creator
VerifiedCreate CSS animations, Framer Motion sequences, Lottie JSON exports, and GSAP timelines for UI transitions, loading states, and micro-interactions.
Install
Claude Code
Copy the SKILL.md file to .claude/skills/animation-creator.md About This Skill
Animation Creator generates production-ready motion code across the major animation ecosystems used in modern web and app development.
CSS Animations
Generates `@keyframes` with proper easing functions (cubic-bezier curves for natural motion), animation-fill-mode, and prefers-reduced-motion media query overrides. Includes shimmer effects for skeleton loaders, pulse animations for status indicators, and spin animations for loading states.
Framer Motion
Creates `motion` component variants with `initial`, `animate`, `exit`, and `transition` props. Generates `AnimatePresence` wrappers for mount/unmount transitions. Stagger children animations with `staggerChildren` for list entrances. `useScroll` and `useTransform` for parallax effects.
GSAP Timelines
Builds `gsap.timeline()` sequences with `from`, `to`, `fromTo`, and `set` tweens. ScrollTrigger integration for pinning, scrubbing, and batch animations. Proper cleanup with `ctx.revert()` for React component teardown.
Lottie
Generates Lottie JSON structure for simple icon animations (checkmarks, loading arcs, toggles). Integrates with lottie-react or lottie-web player.
Performance Guidance
All animations prefer `transform` and `opacity` properties that run on the compositor thread. Warns when animating layout-triggering properties like `width`, `height`, or `top`.
Use Cases
- Generating Framer Motion page transition and element entrance animations
- Creating CSS keyframe animations for loading spinners and skeleton screens
- Building GSAP ScrollTrigger timelines for scroll-driven storytelling
- Writing Lottie JSON animation data for icon micro-interactions
Pros & Cons
Pros
- + Covers CSS, Framer Motion, GSAP, and Lottie in one skill
- + All generated animations include prefers-reduced-motion alternatives
- + Performance guidance prevents accidental layout-thrashing animations
- + GSAP timeline sequences are precisely timed with overlap control
Cons
- - GSAP ScrollTrigger integration requires manual DOM ref wiring in React
- - Lottie JSON generation is limited to simple shapes; complex artwork needs After Effects
Related AI Tools
v0 by Vercel
Freemium
AI UI generator that creates production-ready React components from prompts
- Production-ready React/Next.js component generation
- shadcn/ui and Tailwind CSS output
- Image and screenshot to code conversion
Cursor
Freemium
AI-native code editor with deep multi-model integration and agentic coding
- AI-native Cmd+K inline editing and generation
- Composer Agent for autonomous multi-file changes
- Full codebase indexing and context awareness
Midjourney
Paid
Premier AI image generator known for stunning aesthetic quality
- State-of-the-art aesthetic image generation (v6 model)
- Style Tuner for personalized aesthetic preferences
- Vary, pan, and zoom controls for iterative refinement
Related Skills
SVG Optimizer
CautionOptimize SVG files for web use by removing redundant markup, applying SVGO transforms, converting to symbol sprites, and generating accessible inline SVGs.
UI Component Library Builder
VerifiedBuild and document reusable UI component libraries with Storybook, accessibility testing, design token integration, and multi-framework exports.
React Component Generator
CautionGenerate React components following best practices with proper typing, accessibility, testing, and Storybook stories.
Stay Updated on Agent Skills
Get weekly curated skills + safety alerts
每周精选 Skills + 安全预警