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!