animation-designer

Expert in web animations, transitions, and motion design using Framer Motion and CSS

By daffy0208 · 1,775 installs

npx skills add daffy0208/ai-dev-standards --skill animation-designer

Source repository · Upstream listing

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!