Types of Animation I Create
From subtle micro-interactions to full-page transitions, I use the right technique for every situation.
Micro-interactions
Small, delightful animations on buttons, icons, and form elements that provide instant feedback and make interfaces feel alive.
Scroll Animations
Elements that fade, slide, or transform as users scroll—creating a narrative journey through your content.
Page Transitions
Smooth transitions between pages or sections that maintain context and create a seamless app-like experience.
Loading Animations
Creative loading states that entertain users during wait times—skeleton screens, progress bars, and animated illustrations.
Lottie Animations
Lightweight, scalable vector animations exported from After Effects—perfect for icons, illustrations, and onboarding.
3D Elements
Subtle 3D transforms and WebGL effects that add depth and dimension to your interface without overwhelming users.
Smooth, performant CSS animation
Tools & Technologies
I select the best tool for each project based on complexity, performance requirements, and browser support.
CSS Animations
Native browser support, GPU-accelerated, perfect for simple transitions
GSAP
Professional-grade animation library for complex timelines and sequences
Framer Motion
React-specific animations with declarative syntax and gesture support
Lottie
After Effects animations rendered as JSON for web and mobile
Three.js
3D graphics and WebGL for immersive experiences
Intersection Observer
Native API for scroll-triggered animations with great performance
When to Use Animation
Onboarding
Guide new users through your product with animated tutorials and tooltips that reduce learning friction.
State Changes
Show users what happened after they clicked a button—success messages, error states, loading indicators.
Attention Direction
Draw attention to important elements like CTAs, notifications, or new features without being intrusive.
Brand Personality
Unique animations that make your brand memorable and differentiate you from competitors.
My Animation Principles
- Performance First: 60fps animations that don't jank or lag
- Purposeful Motion: Every animation serves a UX goal
- Accessibility: Respect prefers-reduced-motion settings
- Mobile Optimized: Touch-friendly and battery-conscious
- Progressive Enhancement: Works without JavaScript as fallback