GSAPMOTIONANIMATION
GSAP + Motion together: when to use which
Both GSAP and Motion (Framer Motion) are powerful animation libraries. Here is the mental model I use to decide which one to reach for.
VT
Vaibhav ThakurThe short answer
Use GSAP for scroll-driven, timeline-based, and performance-critical animations. Use Motion for component entrance/exit animations and page transitions.
GSAP strengths
- ScrollTrigger — best scroll animation tool available
- Timelines — sequence complex multi-step animations
- Performance — runs on a separate thread via GSAP ticker
- SplitText — character-level text animations
Motion strengths
- AnimatePresence — handles mount/unmount animations
- Layout animations — automatically animates layout changes
- Variants — clean, declarative animation state management
- Spring physics — natural-feeling motion
The rule I follow
If the animation is tied to scroll position or needs a timeline — GSAP. If it is tied to component state or route changes — Motion. Never use both on the same element.