웹 애니메이션 도구 2026 — Rive / Lottie / Spline / Motion / GSAP (MIT 무료) / Anime.js 4 / Theatre.js 심층 가이드

1. 2026년 웹 애니메이션 지도 — 코드 / 에디터 / 3D / 인터랙티브 4 분류
2. GSAP MIT 무료화 (2024.11, Webflow 인수) — 무엇이 바뀌었나
3. Motion (구 Framer Motion, 2024.10 리브랜드) — React/Vue/Vanilla
4. Rive — 인터랙티브 + state machines
5. Lottie + dotLottie — Airbnb 의 표준
6. Spline — 브라우저 3D
7. Theatre.js — 타임라인 에디터
8. Anime.js 4 — 모듈식 재작성
9. Three.js + R3F — 3D
10. Lenis — smooth scroll 표준
11. AutoAnimate / Mo.js / Tween.js — 그 외
12. Web Animations API + CSS scroll-driven — 네이티브
13. 디자인 → 코드 — After Effects → Lottie, Rive Editor, Spline Editor
14. 한국 / 일본 디자인 시스템 — 토스, 카카오, pixiv, CyberAgent
15. 누가 무엇을 골라야 하나 — 마케팅 / 제품 / 게임 / 학습 자료
16. 참고 / References

1. 2026년 웹 애니메이션 지도 — 코드 / 에디터 / 3D / 인터랙티브 4 분류

2026년의 웹 애니메이션은 한 가지 도구로 끝나지 않습니다. 마케팅 페이지의 스크롤 인터랙션, 제품의 마이크로 인터랙션, 게임/메타버스 같은 3D 씬, 학습 콘텐츠의 상태 머신 기반 인터랙티브 캐릭터 — 각자 다른 도구가 1군입니다.

큰 그림으로 분류하면 네 카테고리로 나뉩니다.

코드 우선 라이브러리 — GSAP 3.13, Motion, Anime.js 4, Web Animations API, react-spring, Lenis, AutoAnimate, Mo.js, Tween.js, Popmotion
에디터/런타임 도구 — Rive (Editor + Runtime), Lottie / dotLottie (Lottie Files + Airbnb 런타임), Spline (3D), Theatre.js (코드 통합형 타임라인)
3D 엔진 — Three.js, React Three Fiber (R3F), Babylon.js, PlayCanvas, WebGPU 직접 사용
네이티브 표준 — CSS animations, CSS scroll-driven animations, Web Animations API, View Transitions API

2026년의 가장 큰 사건은 두 가지였습니다. 첫째, 2024년 11월 Webflow 가 GreenSock 을 인수하면서 GSAP 와 모든 유료 플러그인(SplitText, MorphSVG, ScrollSmoother, MotionPath, DrawSVG, Inertia 등)이 MIT 라이선스로 무료가 됐습니다. 둘째, 2024년 10월 Framer 팀이 Framer Motion 을 "Motion" 으로 리브랜드하면서 React 외에 Vue, Vanilla JS 도 동등하게 지원하기 시작했습니다.

이 두 변화로 2026년의 무료 옵션이 갑자기 두 단계 위로 올라갔습니다. 5년 전엔 "GSAP 유료 vs Anime.js 무료" 였다면, 이젠 GSAP 도 Motion 도 다 무료입니다.

이 글은 그 모든 도구를 2026년 5월 기준으로 빠르게 훑어가는 가이드입니다. 입문자는 "어디부터 시작할까", 시니어는 "다음 프로젝트엔 무엇을 추가할까" 를 정하는 데 도움이 될 겁니다.

2. GSAP MIT 무료화 (2024.11, Webflow 인수) — 무엇이 바뀌었나

GreenSock Animation Platform (GSAP) 은 2008년부터 웹 애니메이션의 사실상의 표준이었습니다. 단순한 트윈 엔진을 넘어서, 타임라인 / 스크롤 트리거 / 모핑 SVG / 텍스트 분리 / 관성 / 모션 패스 등 거의 모든 까다로운 애니메이션 케이스에 대한 검증된 해답을 제공합니다.

2024년 11월 Webflow 가 GreenSock 을 인수하면서 큰 변화가 있었습니다. 모든 유료 "Club GreenSock" 플러그인(과거 99달러/년 짜리 SplitText, MorphSVG 같은 것들)이 MIT 라이선스로 무료가 됐습니다. 이제 npm 으로 그냥 받아 쓰면 됩니다.

npm install gsap
# Webflow 인수 이후엔 별도 라이선스 키 없이 모든 플러그인 사용 가능

GSAP 3.13 의 핵심 기능을 빠르게 정리하면 다음과 같습니다.

gsap.to / gsap.from / gsap.fromTo / gsap.set — 기본 트윈 4총사
gsap.timeline() — 시퀀스를 시간축에서 정확하게 제어
ScrollTrigger — 스크롤 기반 인터랙션 1등. pin, scrub, snap, markers 디버깅
ScrollSmoother — Lenis 같은 스무스 스크롤 (과거 유료, 이제 무료)
SplitText — 글자/단어/줄 단위 분리해서 애니메이션 (과거 유료, 이제 무료)
MorphSVG — SVG path 간의 변형 (과거 유료, 이제 무료)
DrawSVG — 라인 드로잉 효과 (과거 유료, 이제 무료)
MotionPath — path 위로 이동시키기 (과거 유료, 이제 무료)
Inertia / Draggable — 드래그 + 관성 (과거 유료, 이제 무료)
Flip — FLIP 기법 (First, Last, Invert, Play) 으로 레이아웃 트랜지션

기본적인 사용 예시를 React 와 함께 보면 다음과 같습니다.

import { useRef, useEffect } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { SplitText } from 'gsap/SplitText'

gsap.registerPlugin(ScrollTrigger, SplitText)

export function HeroHeadline({ text }: { text: string }) {
  const ref = useRef<HTMLHeadingElement>(null)

  useEffect(() => {
    if (!ref.current) return

    const split = new SplitText(ref.current, { type: 'chars,words' })

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ref.current,
        start: 'top 80%',
        end: 'bottom 20%',
        toggleActions: 'play none none reverse',
      },
    })

    tl.from(split.chars, {
      opacity: 0,
      y: 40,
      rotateX: -45,
      stagger: 0.02,
      duration: 0.6,
      ease: 'power3.out',
    })

    return () => {
      tl.kill()
      split.revert()
    }
  }, [text])

  return <h1 ref={ref}>{text}</h1>
}

GSAP 의 가장 큰 장점은 30년 가까이 쌓인 안정성과 호환성입니다. IE 시절부터 검증된 트윈 엔진이라, 거의 모든 브라우저 / 디바이스에서 일관된 결과를 보장합니다. 단점은 React/Vue 같은 컴포넌트 모델과의 통합이 useEffect cleanup 으로 직접 관리해야 한다는 점인데, 이를 위해 @gsap/react 공식 훅(useGSAP) 이 제공됩니다.

언제 GSAP 을 쓰는가:

스크롤 기반 마케팅 사이트 (Awwwards 류) — ScrollTrigger 가 사실상 표준
SVG 가 많이 들어가는 모션 그래픽 — MorphSVG, DrawSVG, MotionPath
복잡한 시퀀스 / 카드 셔플 / 텍스트 효과
게임 / 인터랙티브 광고에서의 까다로운 타이밍 제어

3. Motion (구 Framer Motion, 2024.10 리브랜드) — React/Vue/Vanilla

2024년 10월 Framer 팀이 Framer Motion 을 "Motion" 으로 리브랜드했습니다. 핵심은 두 가지입니다.

이제 React 만이 아니라 Vue, Vanilla JS 도 1등급 시민
Motion 의 핵심 엔진(Motion One)은 ~3.8KB 의 초경량 라이브러리로 Web Animations API 를 직접 활용

기존의 framer-motion 패키지명은 여전히 사용 가능하지만, 새 프로젝트는 motion 으로 시작하는 것이 표준이 됐습니다.

npm install motion
# React: import { motion } from "motion/react"
# Vue: import { motion } from "motion-v"
# Vanilla: import { animate, scroll, inView } from "motion"

React 컴포넌트로서의 사용 예시:

import { motion, AnimatePresence } from 'motion/react'
import { useState } from 'react'

export function Card() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
          >
            카드 내용
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}

Vanilla JS 에서는 더 가볍게:

import { animate, scroll } from 'motion'

// 기본 트윈
animate('.card', { opacity: 1, y: 0 }, { duration: 0.5, easing: 'spring' })

// 스크롤 트리거
scroll(
  animate('.parallax', { y: [-200, 200] }),
  { target: document.querySelector('.section') }
)

Motion 의 장점:

번들 사이즈가 가벼움 (motion/mini 는 2.6KB)
React 의 선언적 모델과 자연스럽게 어울림
layoutId 를 이용한 자동 FLIP 트랜지션 — 다른 라이브러리엔 없는 강력한 기능
Spring physics 가 1급 — duration 기반과 spring 기반을 자유롭게 섞을 수 있음

언제 Motion 을 쓰는가:

React/Vue 기반의 제품 UI — 카드 트랜지션, 모달, 페이지 전환
디자인 시스템의 마이크로 인터랙션
가벼운 마케팅 페이지 (heavy 한 GSAP scroll 까진 필요 없을 때)

GSAP vs Motion 비교는 단순합니다. 마케팅 사이트의 스크롤 인터랙션이 메인이면 GSAP, 제품 UI 의 카드 트랜지션이 메인이면 Motion. 둘을 같이 쓰는 프로젝트도 많습니다.

4. Rive — 인터랙티브 + state machines

Rive 는 2026년 가장 흥미로운 애니메이션 도구입니다. 단순한 트윈 출력이 아니라, "상태 머신(state machine)" 기반의 인터랙티브 애니메이션을 만들 수 있습니다. Lottie 가 "재생만 하는 비디오 같은 애니메이션" 이라면, Rive 는 "사용자 입력에 반응하는 컴포넌트 같은 애니메이션" 입니다.

Rive 의 핵심 구성요소:

Rive Editor — 데스크톱 + 웹 에디터 (디자이너용)
Rive Runtime — Web (WASM), iOS, Android, Flutter, React Native, Unity
State Machine — 입력(input)에 따라 트랜지션 그래프를 그리는 시스템
Listeners — 마우스 호버 / 클릭 / 드래그를 직접 처리

대표적인 사례는 토글 스위치, 캐릭터의 시선 추적, 패스워드 입력 시 눈을 가리는 동물, 인터랙티브 온보딩 일러스트 등입니다. 한 번 만들어 두면 모든 플랫폼에서 동일하게 동작하는 게 큰 장점입니다.

웹에서 사용 예시:

import { useRive, useStateMachineInput } from '@rive-app/react-canvas'

export function PasswordCharacter({ password }: { password: string }) {
  const { rive, RiveComponent } = useRive({
    src: '/animations/login-character.riv',
    stateMachines: 'Login State Machine',
    autoplay: true,
  })

  const isChecking = useStateMachineInput(rive, 'Login State Machine', 'isChecking')
  const numLook = useStateMachineInput(rive, 'Login State Machine', 'numLook')

  useEffect(() => {
    if (numLook) numLook.value = password.length * 6
  }, [password, numLook])

  return (
    <div style={{ width: 400, height: 400 }}>
      <RiveComponent
        onMouseEnter={() => {
          if (isChecking) isChecking.value = true
        }}
        onMouseLeave={() => {
          if (isChecking) isChecking.value = false
        }}
      />
    </div>
  )
}

Rive 의 강점:

디자이너가 직접 인터랙션 로직을 짤 수 있음 (개발자에게 토스 안 함)
.riv 파일은 매우 작고 효율적 (벡터 + 본 기반)
멀티플랫폼 (웹 / 모바일 / 게임 엔진)
무료 plan 도 충분히 강함

단점은 학습 곡선이 있고(Photoshop/Figma 와 다른 패러다임), 일반 모션 그래픽 용도로는 Lottie 보다 비싸 보일 수 있다는 점입니다. 하지만 한 번 익숙해지면 "Lottie 로는 못 만드는" 인터랙션을 만들 수 있습니다.

5. Lottie + dotLottie — Airbnb 의 표준

Lottie 는 2017년 Airbnb 가 공개한 애니메이션 포맷입니다. After Effects 에서 디자이너가 만든 애니메이션을 JSON 으로 추출해 (Bodymovin 플러그인 사용) 웹/iOS/Android 에서 동일하게 재생할 수 있게 합니다.

2026년의 Lottie 생태계는 다음과 같습니다.

lottie-web — Airbnb 의 공식 웹 런타임 (가장 안정적, 무거움)
@lottiefiles/react-lottie-player — LottieFiles 의 React 래퍼
@lottiefiles/dotlottie-web — dotLottie 포맷용 신형 런타임 (Rust + WASM, 더 빠름)
LottieFiles — 무료 애니메이션 라이브러리 + 에디터 + 협업 툴

dotLottie 는 2022년 LottieFiles 가 도입한 새 포맷입니다. .lottie 확장자로 ZIP 압축된 JSON + 자산을 포함합니다. 기존 .json 보다 ~80% 작고, 하나의 파일에 여러 애니메이션을 묶을 수 있고, 테마/색상 변경 같은 인터랙티브 기능을 지원합니다.

기본 사용 예시:

import { DotLottieReact } from '@lottiefiles/dotlottie-react'

export function LoadingSpinner() {
  return (
    <DotLottieReact
      src="/animations/loader.lottie"
      loop
      autoplay
      style={{ width: 200, height: 200 }}
    />
  )
}

Lottie 의 장점:

After Effects 라는 산업 표준 도구 그대로 사용
한 번 만들면 웹/iOS/안드로이드/React Native/Flutter 다 동작
LottieFiles 에 무료/유료 라이브러리가 수십만 개
마케팅 페이지의 일러스트, 로딩 스피너, 빈 상태 일러스트에 압도적

단점:

인터랙티브 하지 않음 (재생만 함, Rive 와 대조)
일부 After Effects 효과는 지원 안 됨 (모션 블러, 일부 이펙트)
큰 애니메이션은 .json 이 무거워질 수 있음 → dotLottie 로 해결

전형적인 한국/일본 마케팅 페이지에서는 Lottie 가 거의 표준입니다. 토스의 채용 페이지, 라인의 공지 페이지, 야후 재팬의 캠페인 페이지가 다 Lottie 일러스트를 씁니다.

6. Spline — 브라우저 3D

Spline 은 "3D 의 Figma" 라고 불리는 도구입니다. 브라우저에서 직접 3D 모델을 만들고, 머티리얼을 입히고, 인터랙션을 정의해서, React 컴포넌트로 export 할 수 있습니다.

Spline 의 핵심 기능:

브라우저 기반 3D 에디터 (Blender 없이 가능)
무료 plan 도 무제한 (워터마크 없음)
@splinetool/react-spline 으로 React 임베드
인터랙션 (호버, 클릭, 스크롤) 을 에디터에서 직접 정의
AR, 비디오 export, 3D 모델 export

기본 사용:

import Spline from '@splinetool/react-spline'

export function Hero() {
  return (
    <main className="h-screen w-full">
      <Spline scene="https://prod.spline.design/abc123/scene.splinecode" />
    </main>
  )
}

Spline 이 강한 영역:

마케팅 사이트의 히어로 3D 씬 (Vercel, Linear, Arc 브라우저 등이 활용)
디자이너가 직접 3D 콘텐츠를 만들고 싶을 때
빠른 프로토타이핑 (Three.js 코드 없이)

단점:

복잡한 3D 씬(많은 폴리곤, 복잡한 셰이더)엔 부적합
런타임이 무거울 수 있음 — 모바일 최적화 주의
클라우드 의존성 (씬이 Spline 서버에서 호스팅됨)

Spline vs Three.js + R3F 선택은 단순합니다. 디자이너 주도 + 단순한 씬이면 Spline, 개발자 주도 + 복잡한 씬이면 R3F.

7. Theatre.js — 타임라인 에디터

Theatre.js 는 Cantor Studios 가 만든 오픈소스 애니메이션 도구입니다. 가장 큰 특징은 "코드와 비주얼 에디터를 동시에" 다룬다는 점입니다. After Effects 의 타임라인 같은 UI 를 브라우저에 띄워서, 디자이너가 시각적으로 키프레임을 조정하면 그 결과가 JSON 으로 저장되고 코드가 그것을 재생합니다.

기본 컨셉:

Studio — 개발 중 사용하는 비주얼 에디터 (production 에선 제거)
Sheet — 한 씬의 타임라인
Object — Sheet 에 속하는 애니메이션 가능한 객체 (DOM, R3F mesh, 무엇이든)

기본 사용:

import { getProject } from '@theatre/core'
import studio from '@theatre/studio'

// 개발 중에만 studio 띄움
if (process.env.NODE_ENV === 'development') {
  studio.initialize()
}

const project = getProject('My Animation')
const sheet = project.sheet('Scene 1')

const obj = sheet.object('Logo', {
  x: 0,
  y: 0,
  rotation: 0,
  opacity: 1,
})

obj.onValuesChange((values) => {
  // values.x, values.y, values.rotation, values.opacity 를 DOM 에 반영
  logoEl.style.transform = `translate(${values.x}px, ${values.y}px) rotate(${values.rotation}deg)`
  logoEl.style.opacity = String(values.opacity)
})

// 재생
sheet.sequence.play()

Theatre.js 의 강점:

R3F (React Three Fiber) 와 통합되어 3D 씬을 시각적으로 조작
After Effects 처럼 키프레임 편집 가능
결과물이 JSON 으로 깃에 커밋 가능 → 디자이너와 개발자가 같은 PR 에 참여 가능

언제 쓰는가:

복잡한 3D 씬에서 카메라 모션을 시각적으로 조정하고 싶을 때
디자이너가 직접 키프레임을 조정해야 할 때
마케팅 사이트의 스크롤 기반 시네마틱

GSAP ScrollTrigger 가 "코드로 정의" 라면, Theatre.js 는 "타임라인 UI 로 정의 + 코드로 재생" 입니다.

8. Anime.js 4 — 모듈식 재작성

Anime.js 는 Julian Garnier 가 만든 가벼운 애니메이션 라이브러리로, GSAP 의 무료 대안으로 오래 사랑받았습니다. 2024년 말 v4 가 출시되면서 모듈식 아키텍처로 완전히 재작성됐습니다.

Anime.js 4 의 변화:

모듈식 import — animate, createTimeline, createDraggable, stagger 등을 필요한 것만 import
트리 쉐이킹 지원 — 번들 사이즈 절감
TypeScript 1급 지원
Spring physics 추가

기본 사용:

import { animate, stagger, createTimeline } from 'animejs'

// 단순 트윈
animate('.card', {
  translateY: [-20, 0],
  opacity: [0, 1],
  duration: 600,
  delay: stagger(100),
  ease: 'outQuad',
})

// 타임라인
const tl = createTimeline({
  defaults: { duration: 400, ease: 'outQuad' },
})

tl.add('.header', { translateY: [-50, 0], opacity: [0, 1] })
  .add('.subheader', { translateX: [-50, 0], opacity: [0, 1] }, '-=200')
  .add('.cta', { scale: [0.8, 1], opacity: [0, 1] }, '-=200')

Anime.js 의 위치:

GSAP 보다 가볍고 API 가 단순
Motion 보다 React-친화적이진 않지만 vanilla JS 친화적
학습 곡선 낮음
작은 ~ 중간 규모 프로젝트에 적합

GSAP 가 무료가 된 지금, Anime.js 를 고를 이유는 두 가지입니다. (1) GSAP 보다 가벼운 번들이 필요할 때, (2) 더 단순한 API 가 좋을 때.

9. Three.js + R3F — 3D

Three.js 는 2010년 ricardo cabello (mr.doob) 가 만든, 웹 3D 의 사실상 표준 라이브러리입니다. WebGL 위의 추상화 레이어로, Scene / Camera / Mesh / Material / Light 같은 친숙한 3D 개념을 제공합니다.

2026년의 Three.js 생태계:

three (코어) — r170+ 버전. WebGPU 백엔드 실험 단계
@react-three/fiber (R3F) — React 친화적 wrapper (Poimandres 팀)
@react-three/drei — R3F 의 유틸리티 모음 (카메라 컨트롤, 셰이더, 헬퍼)
@react-three/postprocessing — 포스트 프로세싱 (블룸, DOF, 노이즈)
@react-three/rapier — Rapier 물리 엔진 wrapper
@react-three/cannon — Cannon-es 물리 엔진 wrapper
leva — R3F 용 디버그 GUI

R3F 의 기본 패턴:

import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls, Environment } from '@react-three/drei'
import { useRef } from 'react'
import type { Mesh } from 'three'

function SpinningBox() {
  const ref = useRef<Mesh>(null)

  useFrame((_, delta) => {
    if (ref.current) {
      ref.current.rotation.x += delta
      ref.current.rotation.y += delta * 0.5
    }
  })

  return (
    <mesh ref={ref}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

export function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} />
      <SpinningBox />
      <Environment preset="sunset" />
      <OrbitControls />
    </Canvas>
  )
}

Three.js 와 Spline 의 차이:

Three.js + R3F — 코드 기반, 무한한 자유도, 무거운 학습 곡선
Spline — GUI 기반, 빠른 결과, 자유도 제한

복잡한 게임 / 메타버스 / 데이터 시각화 (예 Globe.gl, three-globe) 는 Three.js, 마케팅 사이트의 히어로 3D 는 Spline 이 일반적입니다.

10. Lenis — smooth scroll 표준

Lenis 는 Studio Freight (지금은 Darkroom Engineering) 가 만든 스무스 스크롤 라이브러리입니다. 2023년 출시 이후 빠르게 웹 애니메이션의 사실상 표준이 됐습니다.

Lenis 의 특징:

가벼움 (~3KB)
네이티브 스크롤 이벤트와 호환 (window.scroll 이벤트 정상 동작)
모바일 친화적
GSAP ScrollTrigger 와 완벽 호환

기본 사용:

import Lenis from 'lenis'

const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  smoothWheel: true,
})

function raf(time: number) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}
requestAnimationFrame(raf)

GSAP ScrollTrigger 와 연동:

import { ScrollTrigger } from 'gsap/ScrollTrigger'

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
})
gsap.ticker.lagSmoothing(0)

언제 쓰는가:

거의 모든 마케팅/포트폴리오 사이트 — Awwwards 수상작의 80% 가 Lenis 또는 GSAP ScrollSmoother
스크롤 기반 인터랙션이 메인인 사이트

언제 쓰지 않는가:

접근성이 1순위인 사이트 — 스무스 스크롤은 키보드/스크린리더 사용자에게 혼란
긴 텍스트 위주 사이트 — 일반 스크롤이 더 자연스러움
사용자가 prefers-reduced-motion 을 설정한 경우 비활성화 필수

2026년 트렌드는 "Lenis 를 기본으로 깔되, prefers-reduced-motion 을 존중" 입니다.

11. AutoAnimate / Mo.js / Tween.js — 그 외

웹 애니메이션의 풀스택을 다 쓸 일은 없지만, 알아두면 좋은 도구들을 빠르게 정리합니다.

AutoAnimate — Formkit 팀의 제로 컨피그 트랜지션. React/Vue/Svelte 의 자식 요소가 add/remove/move 될 때 자동으로 부드러운 트랜지션을 입혀줍니다.

import { useAutoAnimate } from '@formkit/auto-animate/react'

export function TodoList({ todos }: { todos: string[] }) {
  const [parent] = useAutoAnimate()

  return (
    <ul ref={parent}>
      {todos.map((todo, i) => (
        <li key={i}>{todo}</li>
      ))}
    </ul>
  )
}

장점은 "코드 1줄" 로 끝나는 것, 단점은 자유도가 매우 제한적이라는 것입니다. 빠르게 부드러움을 더하고 싶을 때 좋습니다.

Mo.js — 모션 그래픽에 특화된 라이브러리. 파티클, 버스트, 셰이프 모핑 등 "시네마틱한 효과" 를 만들기 좋습니다. 사용자는 줄었지만 일부 마니아층이 있습니다.

Tween.js — 가장 오래된 트윈 엔진 (2010년부터). Three.js 와 같이 쓰는 케이스가 많습니다. 가벼우면서 정확한 트윈 제어가 필요할 때.

Popmotion — Motion 의 전신. 지금은 Motion 에 흡수됨. 새로 시작한다면 Motion 을 쓰세요.

react-spring — Pmndrs (Poimandres) 의 React 스프링 라이브러리. Motion 의 spring 보다 자유도가 높지만 API 가 더 어렵습니다.

Animate.css — 순수 CSS 애니메이션 클래스 모음. 가장 가볍지만 자유도 낮음. 빠른 프로토타입에만.

12. Web Animations API + CSS scroll-driven — 네이티브

브라우저가 직접 지원하는 네이티브 애니메이션 API 도 2026년엔 매우 강력해졌습니다. 라이브러리 없이도 많은 것을 할 수 있습니다.

Web Animations API (WAAPI) — 모든 모던 브라우저가 지원.

const el = document.querySelector('.box')

const animation = el!.animate(
  [
    { transform: 'translateY(0px)', opacity: 1 },
    { transform: 'translateY(-100px)', opacity: 0 },
  ],
  {
    duration: 800,
    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
    fill: 'forwards',
  }
)

animation.onfinish = () => {
  console.log('애니메이션 종료')
}

Motion 의 핵심 엔진이 WAAPI 위에 빌드되어 있어서, 사실 Motion 을 쓴다는 건 WAAPI 를 효율적으로 쓰는 것과 같습니다.

CSS scroll-driven animations — 2024년 후반 Chrome/Edge 105+, Safari 17.5+, Firefox 132+ 에서 지원되기 시작. JS 없이 스크롤 기반 애니메이션을 작성할 수 있습니다.

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

이거 한 줄로 스크롤 인뷰 애니메이션이 끝납니다. GSAP ScrollTrigger 없이도. 단점은 Firefox 의 지원이 늦었고, 복잡한 인터랙션엔 한계가 있다는 것입니다.

View Transitions API — 페이지 / 라우트 전환 시 부드러운 트랜지션. Chrome 111+ 부터, Safari 18+ 부터 지원. Next.js, Astro 가 라우트 전환에서 이를 활용 시작.

// View Transitions 시작
if ('startViewTransition' in document) {
  document.startViewTransition(() => {
    // DOM 업데이트
    document.body.classList.toggle('dark-mode')
  })
}

2026년의 트렌드는 "가능한 한 네이티브로, 안 되면 Motion, 그래도 안 되면 GSAP" 입니다.

13. 디자인 → 코드 — After Effects → Lottie, Rive Editor, Spline Editor

웹 애니메이션 도구의 진짜 차이는 "디자이너에서 개발자에게 어떻게 넘어가느냐" 에서 갈립니다.

전통적인 워크플로 — 디자이너가 After Effects 에서 만들고, 개발자가 GSAP 으로 다시 코딩.

디자이너: After Effects (.aep) → 영상 export (mp4)
개발자: 영상 보고 GSAP 코드로 재구현
결과: 디자이너의 모션과 개발자의 결과물이 다름, 반복 수정 폭증

Lottie 워크플로 — After Effects 에서 Bodymovin 플러그인으로 JSON 추출, 그대로 웹/모바일에서 재생.

디자이너: After Effects + Bodymovin → animation.json
개발자: lottie-web 으로 그대로 재생
결과: 디자이너의 모션이 픽셀 정확하게 재현됨

Rive 워크플로 — Rive Editor 에서 직접 만들고, 상태 머신 정의해서 .riv 추출, 런타임에서 입력 바인딩만.

디자이너: Rive Editor → character.riv (state machine 포함)
개발자: @rive-app/react-canvas 로 input 바인딩만
결과: 디자이너가 인터랙션 로직까지 정의, 개발자는 데이터만 연결

Spline 워크플로 — Spline Editor 에서 3D 만들고 인터랙션 정의, scene.splinecode export.

디자이너: Spline (3D 모델링 + 머티리얼 + 인터랙션)
개발자: @splinetool/react-spline 로 임베드
결과: 3D 마케팅 페이지를 디자이너 단독으로 완성

Theatre.js 워크플로 — 코드로 객체 정의, 비주얼 에디터로 키프레임 조정, JSON 으로 깃에 커밋.

개발자: Theatre Studio 켜고 객체 정의
디자이너(또는 개발자): 타임라인 UI 로 키프레임 조정 → save
결과: 디자이너와 개발자가 같은 PR 에 참여, JSON 으로 버전 관리

대형 마케팅 캠페인은 보통 Lottie + GSAP 조합, 제품의 인터랙티브 캐릭터는 Rive, 3D 히어로는 Spline, 시네마틱 스크롤은 Theatre.js + R3F 가 2026년의 패턴입니다.

After Effects 외의 디자인 도구도 점차 통합되고 있습니다. Cavalry (모션 디자인 도구) 는 Lottie export 를 지원하고, Figma 도 Smart Animate + 플러그인으로 Lottie export 가 가능합니다. Adobe 의 Animate (구 Flash) 도 여전히 일부 광고 / 게임 분야에서 쓰입니다.

14. 한국 / 일본 디자인 시스템 — 토스, 카카오, pixiv, CyberAgent

한국과 일본의 큰 회사들이 실제로 어떤 도구를 쓰는지 사례를 보겠습니다.

토스 (Toss) — 토스 디자인 시스템의 마이크로 인터랙션은 Framer Motion (Motion) + Lottie 가 메인입니다. 송금 완료 후의 체크마크 애니메이션, 로딩 스피너, 광고 배너는 거의 다 Lottie. 페이지 트랜지션과 카드 입장 / 모달은 Motion. 토스 디자이너들이 "Lottie 파일을 .json 으로 정확하게 뽑는 법" 워크숍을 자주 한다는 소문이 있습니다.

카카오 (Kakao) — KakaoTalk 의 이모티콘이 이미 거대한 애니메이션 시스템이고, 웹 (다음, 카카오뱅크, 카카오페이) 에서는 Lottie + CSS transitions 가 메인입니다. 카카오뱅크의 카드 펼침 애니메이션이 GSAP 으로 알려져 있습니다.

라인 (LINE) — 일본 시장에서는 LINE 의 영향이 압도적입니다. LINE Sticker 의 애니메이션이 자체 포맷(APNG, 후엔 자체 비디오 포맷) 으로 동작하고, 웹 (line.me, LINE Pay 일본) 에서는 Lottie 가 표준입니다.

야후 재팬 (Yahoo Japan) — LINE 야후 합병 이후, 마케팅 페이지는 Lottie + GSAP 조합. 광고 배너에는 자체 도구 (Bodymovin → 자체 변환 파이프라인) 사용.

pixiv — 일본의 일러스트 SNS. pixivision 같은 매거진 페이지는 GSAP scroll + Lottie 일러스트. 일러스트레이터를 위한 인터페이스라 애니메이션이 "사용자 콘텐츠를 방해하지 않게" 절제된 톤.

CyberAgent — 일본의 광고/게임 대기업. 자회사 (AbemaTV, Tap Sports Baseball 등) 가 다양한 도구 사용. CyberAgent Developers Blog 에 "Lottie 도입기" "Three.js 게임 페이지" 글이 자주 올라옴.

SmartNews — 일본 뉴스 앱. 웹 마케팅 페이지에 Rive 인터랙티브 캐릭터 사용 사례.

ZOZO — 일본 패션 EC. 제품 페이지의 3D 회전 뷰가 Three.js 기반.

배달의민족 (우아한형제들) — 한국. 마케팅 페이지에 Lottie 가 매우 적극적으로 쓰이고, 캐릭터 (배민체와 함께) 의 인터랙티브 모션에 Rive 실험 진행 중인 것으로 알려짐.

당근 (Carrot) — 한국 중고거래/지역 커뮤니티. 마이크로 인터랙션에 Framer Motion (Motion) 위주, 광고 페이지에 Lottie.

쿠팡 (Coupang) — 한국. 거대 EC 답게 성능이 우선이라 무거운 애니메이션을 자제. CSS 트랜지션 + 일부 Lottie 정도.

NAVER — 한국의 다음과 같은 거대 포털. 자체 디자인 시스템 (Naver D2) 에 Motion 과 Lottie 가 표준화되어 있음.

15. 누가 무엇을 골라야 하나 — 마케팅 / 제품 / 게임 / 학습 자료

마지막으로 용도별 추천을 정리합니다.

마케팅 사이트 (Awwwards 류, 캠페인 페이지)

1순위 GSAP 3.13 + ScrollTrigger + Lenis
일러스트는 Lottie / dotLottie
3D 히어로가 필요하면 Spline (단순) 또는 Three.js + R3F (복잡)
시네마틱 스크롤은 Theatre.js + R3F

제품 UI (SaaS, 앱)

1순위 Motion (구 Framer Motion)
자동 트랜지션은 AutoAnimate
로딩 / 빈 상태는 Lottie
인터랙티브 캐릭터 (온보딩, 결제 캐릭터) 는 Rive

게임 / 인터랙티브 콘텐츠

2D 인터랙티브 캐릭터 — Rive
3D 게임 — Three.js + R3F + Rapier (물리)
광고 / 미니게임 — 자체 캔버스 + GSAP (티이밍) + Mo.js (이펙트)

학습 자료 / 교육

인터랙티브 다이어그램 — Rive (상태 머신이 학습에 적합)
코드 위주 시각화 — d3.js + Motion
일러스트 — Lottie

성능 우선

네이티브 CSS animations + scroll-driven animations
라이브러리 필요시 Motion mini (2.6KB)
Lenis (3KB) 만 스무스 스크롤로

번들 사이즈 최소화

Vanilla — Web Animations API + CSS only
라이브러리 한 개 — Motion 또는 Anime.js 4 modular
GSAP 은 무료지만 코어 + ScrollTrigger 만 해도 ~50KB

엔터프라이즈 / 안정성

GSAP 3.13 — 30년 가까운 검증
Lottie (lottie-web) — Airbnb 가 유지보수
Motion — Framer 가 백킹

브랜드 통일

한 가지 도구로 일관성 — Motion (제품 + 마케팅)
또는 GSAP (마케팅) + Motion (제품) 의 2-스택

2026년의 베스트 셋업은 보통 다음과 같습니다. Motion 으로 제품 UI 의 80%, Lottie 로 일러스트 100%, GSAP + ScrollTrigger + Lenis 로 마케팅 페이지의 스크롤 인터랙션, 필요시 Rive 또는 Spline 추가. 이 조합 하나로 거의 모든 시나리오를 커버합니다.