Agent skill · design visual · daffy0208
animation-designer
Expert in web animations, transitions, and motion design using Framer Motion and CSS
Why this skill is useful
Provides specific animation patterns and Framer Motion commands that enhance web application design capabilities.
What it needs
Requires framer-motion installed locally. About 7k tokens when loaded. Last updated 2025-12-25. 33 stars on the source repository.
What this skill does
Animation Designer Skill I help you create smooth, professional animations for web applications using Framer Motion and CSS. What I Do UI Animations: Page transitions Component enter/exit animations Hover effects, button interactions Loading animations Scroll Animations: Parallax effects Scroll-triggered animations Progress indicators Micro-interactions: Button press feedback Form field focus states Success/error animations Drag and drop feedback Framer Motion Basics Installation Basic Animation --- Common Animation Patterns Pattern 1: Fade In on Mount --- Pattern 2: Staggered List Animation --- Pattern 3: Button Hover Animation --- Pattern 4: Modal / Dialog Animation --- Pattern 5: Page Transition --- Scroll Animations Scroll-Triggered Animation Parallax Effect Scroll Progress Indicator --- Loading Animations Spinner Skeleton Loader Pulsing Dots --- CSS Animations Keyframe Animations Tailwind Animations Usage: --- Micro-Interactions Success Checkmark Animation Notification Badge --- Animation Best Practices 1. Performance 2. Duration 3. Easing 4. Reduce Motion (Accessibility) --- Complex Animations Drag and Drop Animated Number Counter --- When to Use Me Perfect for: Creating polished UI animations Building interactive components Adding scroll effects Designing loading states Improving user feedback I'll help you: Choose the right animation type Implement smooth transitions Optimize animation performance Ensure accessibility Create delightful micro-interactions What I'll Create Let's make your interfaces feel alive!
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daffy0208/animation-designer