Motion vs GSAP - Choose Your Web Animation Hero

As AI makes it easier to build software, the only way to make your software truly stand out is by optimising for delight. One way a designer or developer can do that is by incorporating tasteful animations. Animations bring interfaces to life, but to create beautiful animations, one should first know which tool to use and when. This article does exactly that.

Why use JavaScript for animation when you have CSS

I love CSS to bits, but it's just not quite there yet when it comes to animations. You can't animate complex sequences, chain timelines, or sync scroll interactions as cleanly as you'd like. Motion and GSAP give you expressive control, and they don't tank your site's performance.

Introducing Motion

Motion was first specifically made for React (now also supports Vue and Vanilla JS). It brings animation directly into your components. Just wrap your element with motion and it's go time.

The thing I love the most about Motion is that it's declarative. You don't need to tell it how to animate, you just say what the end state should be, and it figures out the rest.

import { motion } from "motion/react";

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  Hello Motion!
</motion.div>

Motion is great for things like

• Page transitions
• Component animations
• Layout transitions and
• Micro-interactions

Introducing GSAP

GSAP is the go-to for complex, timeline-driven, high-performance animations. And unlike Motion, it’s framework-agnostic. You can use it with React, Vue, Vanilla JS, or even SVG and Canvas.

My favourite feature of GSAP is timelines. It allows you to chain animations, stagger elements, and sync sequences with pixel-perfect control.

const tl = gsap.timeline();
tl.to(".box", { x: 100 })
  .to(".box", { y: 50 })
  .to(".box", { rotate: 360 });

GSAP is great for things like

• Scroll-based animations
• Sequence animations
• Landing page animations
• SVG or canvas animation

When to use what

Use Motion if -

• You’re working in React, Vue, or Vanilla JS.
• You want to animate components quickly.
• You care about layout transitions and shared elements.

Use GSAP if -

• You’re mostly working outside React (can also be used in React with the useGSAP() hook).
• You’re building scroll-based animations or complex sequences.
• You need pixel-perfect control over timing and easing.
• You want to use the advanced plugins (GSAP is free for all).

Can they be used together

Yes, absolutely. I use Motion largely for micro-animations, and if the project requires any scroll-based or timeline animations, I use GSAP.

LLMs are surprisingly good at both

If you're ever stuck or curious about how to animate something with Motion or GSAP, LLMs are insanely helpful. They can help you write quick snippets, debug animations, and even explain the difference between various easings.

Note: LLMs aren't great at generating tasteful animations. The only way to build an intuition for great animations is through inspiration and experimentation. Nothing beats learning by doing.

Backed by solid docs

If you're planning to dive into the world of web animations, I can't recommend the GSAP and Motion docs enough. Both are incredibly well-written, beginner-friendly, and packed with practical examples. I'll leave the links to both of them below. Read them and spend a lot of time building, tweaking, and playing.

• Motion Docs
• GSAP Docs