tailwind - animation plug in

• 가벼운 진입 효과는 Tailwind 플러그인 두 개로 충분하다
• 스크롤, 타임라인, 드래그가 들어가면 GSAP 다
• GSAP 는 2025년부터 플러그인까지 전부 무료가 됐다

세 가지를 비교한 이유

화면에 움직임을 좀 넣으려고 찾아보니 자주 보이는 게 세 개였다. 둘은 Tailwind 클래스로 끝내는 플러그인이고, 하나는 코드로 제어하는 JS 라이브러리다. 성격이 달라서 어느 정도 연출이 필요한지로 고르면 된다.

tailwindcss-animated

Tailwind 에 CSS 애니메이션 유틸을 붙여 주는 플러그인이다. 사이트의 Configurator 에서 속성을 고르고 미리보기를 확인한 뒤, 나온 클래스 문자열을 복사해서 쓴다.

duration, delay, iteration-count, direction, fill-mode, timing-function 같은 속성 유틸과 fade, fade-up, bounce, shake, spin, jump-in, flip-up, wiggle 같은 프리셋이 있다. JIT 라서 쓴 클래스만 빌드에 들어간다.

페이지 진입 fade, slide, 버튼 pulse, bounce 처럼 가벼운 UI 모션에 맞다. 스크롤 연동이나 순차 타임라인은 CSS 만으로는 한계가 있다.

npm install -D tailwindcss-animated

tailwindcss-motion (Rombo)

Rombo 가 만든 Tailwind 전용 모션 플러그인이다. 프리셋과 커스텀 문법이 같이 있고, 접근성과 성능을 기본으로 내세운다.

웹 Animator 에서 Duration, Ease, Scale, Translate, Opacity, Rotate, Blur 를 만져서 클래스를 복사할 수 있고, 브라우저 익스텐션으로 실제 사이트 위에서 만들 수도 있다. 만든 걸 Framer Motion 이나 GSAP 코드로 내보낼 수 있다는 게 animated 와 가장 다른 점이다.

다만 2025년 중반 1.1.1 이후로 릴리스가 없고, Tailwind v4 에서 typewriter 프리셋이 안 되는 이슈 같은 게 열려 있다. 도입 전에 쓸 프리셋이 v4 에서 도는지 한 번 돌려보는 게 좋다.

npm i -D tailwindcss-motion

Tailwind v4 에서 붙이기

v3 에서는 둘 다 tailwind.config 의 plugins 에 넣었는데, v4 는 CSS 파일에서 붙인다. animated 는 @import 로, motion 은 @plugin 으로 넣는다. motion 을 @import 로 넣으면 안 된다.

@import "tailwindcss";
@import "tailwindcss-animated";
@plugin "tailwindcss-motion";

GSAP

CSS 클래스가 아니라 JS 코드로 타임라인, 스크롤, SVG, 순차 재생을 제어하는 엔진이다. ScrollTrigger 로 스크롤 연출을, timeline 으로 여러 요소의 순차 등장을 만든다. React 에서는 useGSAP() 훅을 쓴다.

gsap.to('.box', { x: 100, duration: 1 });
gsap.timeline()
  .to('.a', { opacity: 1 })
  .to('.b', { y: 0 }, '-=0.3');

예전에는 SplitText, MorphSVG 같은 플러그인이 유료 멤버십에 묶여 있었는데, Webflow 가 인수한 뒤 2025년 4월부터 전부 무료가 됐고 상업용도 된다. 막히는 건 Webflow 와 경쟁하는 노코드 애니메이션 빌더에 넣는 경우 정도다. 설치는 npm install gsap 하나면 된다.

스크롤을 따라가는 섹션, 랜딩처럼 연출이 중요한 화면, 드래그나 SVG 모핑에 맞다. 대신 번들이 커지고 배울 게 많아서, hover 정도에 쓰기엔 과하다.

고르는 기준

단순한 진입 효과만 필요하면 animated 나 motion, 프리셋과 GUI 로 모션 문법을 통일하고 싶으면 motion, 스크롤과 타임라인이 들어가면 GSAP 다. motion 으로 프로토타입을 만들고 복잡해지면 GSAP 로 내보내는 순서도 괜찮다.

회사 프로젝트에서 보면

우리 모노레포는 세 개 다 아직 쓰지 않고, 팀 규칙으로 framer-motion 은 쓰지 않는다. Tailwind 플러그인은 CSS 라서 이 규칙과 부딪히지 않고, GSAP 는 별개라 팀 합의가 필요하다.

가벼운 UI 는 Tailwind 플러그인, 스크롤 연출은 GSAP 로 역할을 나누는 게 깔끔해 보인다.