FrontendAnimationReact
For years, GSAP (GreenSock) was my go-to tool for web animation. It is incredibly robust, fast, and handles timeline sequences like a dream. However, when working in React, GSAP often requires manually writing refs, dealing with component cleanup, and coordinating state manually.
I shifted to Framer Motion for standard React animations, and here is why:
1. Declarative Syntax
Framer Motion animations are fully declarative. You write `animate={{ opacity: 1 }}` directly on the tag, and it integrates natively with React state. There is no need to create timelines inside `useEffect` hooks or manage cleanups.
2. Enter/Exit Animations
Animating elements that are removed from the DOM is notoriously tricky. Framer Motion's `<AnimatePresence>` makes exit animations extremely simple with a clean `exit={{ opacity: 0 }}` prop.
3. Drag and Gestures
Adding constrained, springy drag-and-drop or hover animations requires only single-word props like `drag` or `whileHover`, complete with spring physics configuration.
When to still use GSAP
I still reach for GSAP when doing highly complex scroll-timeline animations (using ScrollTrigger) that require frame-by-frame scrubbing, or when animating thousands of SVG elements where DOM overhead must be bypassed in favor of Canvas rendering.