Framer Motion vs GSAP vs CSS Animations
CSS animations are the cheapest and lightest option for simple effects. Framer Motion is the React first library for component animations with declarative APIs. GSAP is the most powerful animation library for complex scroll choreography and timeline based animation. The three are credible at different scales. Most React apps need CSS plus Framer Motion. Apps with serious scroll storytelling add GSAP.
What you actually need to know
- CSS for simple. Framer Motion for React components. GSAP for complex scroll.
- Bundle costs are modest. Dynamic import for heavy uses.
- Animate transform and opacity. Avoid layout properties.
- Respect prefers reduced motion.
- The library matters less than what you animate.
Library
Best fit
Bundle size compressed
CSS animations
Simple effects
Free
Framer Motion
React component animations
About 50 KB
GSAP
Complex scroll and timeline
30 KB plus plugins
Lottie
After Effects animations
Variable
Anime.js
Lightweight JS animation
About 14 KB
React Spring
Physics based animations
About 30 KB
The core argument
The animation library choice is one of those decisions that founders treat as preference and engineers treat as substantial. The reality is in between. The library matters less than what you animate. CSS animations done well outperform JavaScript animations done poorly. The library that fits your needs matters because of the developer experience and the patterns it supports.
CSS animations are the cheapest and lightest option available. Hardware accelerated by default, free in bundle size, and more than enough for hover transitions, loading spinners, and focus rings. The team that does not need more than this should not pay the bundle cost of a library.
Framer Motion is the React first animation library. Its API is declarative and fits React patterns naturally, so mount and unmount animations stay clean, layout animations let items reorder smoothly, and drag interactions feel native rather than bolted on. For React apps with component level animation needs, Framer Motion is the right default.
GSAP is the most powerful animation library of the three. Its timeline control is precise, its scroll choreography handles complex multi step animations without strain, and its SVG capabilities go deeper than the others. For apps with cinematic scroll storytelling, GSAP is the gold standard. The bundle cost is real, but justified for the work it does.
Most React apps need CSS plus Framer Motion. Apps with serious scroll storytelling add GSAP. Apps that are React heavy but skip Framer Motion usually struggle with animation patterns that the library would have made easy. Apps that adopt GSAP for everything usually pay bundle cost they did not need to.
The decision by use case
Use case
Recommended library
Button hover
CSS
Loading spinner
CSS
Modal mount and unmount
Framer Motion
Page transition
Framer Motion
Drag and drop animation
Framer Motion plus dnd-kit
Reorderable list animation
Framer Motion layout animation
Scroll triggered hero
GSAP ScrollTrigger
Multi step storytelling
GSAP timeline
SVG path animation
GSAP
Lottie file from designer
Lottie player
How much does this cost
The dollar cost of CSS is zero. Framer Motion is 50 KB compressed. GSAP is 30 KB plus plugins. The bundle cost is meaningful relative to the rest of the page. Dynamic import the heavy libraries where they are not needed on first paint.
Features the animation setup must have
- Default to CSS for simple effects.
- A library for complex animations.
- Dynamic imports where the animation library is not needed on first paint.
- Respect for prefers reduced motion.
- A consistent API across the app.
- Performance budget on animations.
- Testing on slower devices.
- Documentation of which animations exist and where.
Expert opinion
The animation library choice is downstream of the work you are doing. Most React apps need CSS plus Framer Motion. The teams that pick GSAP for everything pay for capability they do not use. The teams that try to do complex scroll choreography in Framer Motion struggle. The library should fit the work. The fitting is usually obvious once you state the work clearly.
Yashveer Singh, founder of Yashveer Labs
How this played out on a real project
A client wanted to ship a cinematic marketing site with scroll triggered animations. The team had started with Framer Motion and was struggling. The scroll choreography did not fit the library's strengths.
We migrated the scroll work to GSAP. The component animations stayed on Framer Motion. CSS handled the simple effects. The combination worked. The scroll telling that had been awkward in Framer Motion became natural in GSAP.
The bundle grew by GSAP's size. We dynamic imported GSAP only on the pages that needed it. The marketing pages got the heavy bundle. The application pages stayed light. The performance held.
For more on the related work, see building cinematic web experiences without killing performance and CLS without tears layout stability patterns.
Common mistakes teams make
- Adopting GSAP for animations that CSS would have handled.
- Hand rolling animations in CSS that Framer Motion would have made trivial.
- Animating layout properties. Slow.
- No prefers reduced motion respect.
- No dynamic import of heavy libraries.
- Mixing libraries inconsistently. Confusion.
- No testing on slow devices.
- Treating animation as polish rather than as part of the brand.
A two week setup plan
- Week one. Audit current animation needs. Pick the library set.
- Week two. Set up Framer Motion as the default. Add GSAP for scroll if needed. Establish the prefers reduced motion respect.
For more on the related work, read building cinematic web experiences without killing performance and the patterns that make a SaaS feel premium. On the broader frontend side, bundle size the quiet killer of mobile web performance is the natural next read.
FAQ
Frequently asked
- When are CSS animations enough?
- When does Framer Motion win?
- When does GSAP win?
- What is the bundle cost?
- What about performance?
- What about reduced motion?
- What is the worst animation mistake?
Author
The reason my name is on this page
My name is on this page because I wrote what is on this page. Yashveer Singh. Full stack developer. Founder of Yashveer Labs. The portfolio is on the homepage. The projects are live. The code is real. The work is provable. If you have read this far, you already know whether the voice matches the standard you are looking for. The next move is yours.