1. The 2026 Web Animation Map — Code / Editor / 3D / Interactive

Web animation in 2026 is no longer a one-tool affair. Scroll interactions on a marketing page, micro-interactions in product UI, 3D scenes for games and metaverse experiences, and state-machine-driven interactive characters for learning content — each has its own first-class tool.

The big picture breaks into four categories.

- Code-first libraries — GSAP 3.13, Motion, Anime.js 4, Web Animations API, react-spring, Lenis, AutoAnimate, Mo.js, Tween.js, Popmotion

- Editor / runtime tools — Rive (Editor + Runtime), Lottie / dotLottie (LottieFiles + Airbnb runtime), Spline (3D), Theatre.js (code-integrated timeline)

- 3D engines — Three.js, React Three Fiber (R3F), Babylon.js, PlayCanvas, raw WebGPU

- Native standards — CSS animations, CSS scroll-driven animations, Web Animations API, View Transitions API

Two events defined 2026. First, in November 2024 Webflow acquired GreenSock and turned GSAP plus every paid plugin (SplitText, MorphSVG, ScrollSmoother, MotionPath, DrawSVG, Inertia, and more) into MIT-licensed open source. Second, in October 2024 the Framer team rebranded Framer Motion to "Motion" and gave Vue and Vanilla JS equal first-class status alongside React.

Together those two shifts pushed the free options two tiers higher than they were five years ago. Back then it was "paid GSAP vs free Anime.js." Now GSAP and Motion are both free.

This article is a fast tour of every one of those tools as of May 2026. Beginners should be able to use it to decide where to start; senior developers should be able to use it to decide what to add to their next project.

2. GSAP Goes MIT Free (Nov 2024, Webflow Acquisition) — What Changed

GreenSock Animation Platform (GSAP) has been the de facto standard for web animation since 2008. Beyond a simple tween engine it provides battle-tested answers for almost every difficult animation case — timelines, scroll triggers, SVG morphing, text splitting, inertia, motion paths.

When Webflow acquired GreenSock in November 2024 something big changed. Every paid "Club GreenSock" plugin (the ones that used to cost $99/year, like SplitText and MorphSVG) became MIT-licensed open source. You can now install them from npm and use them freely.

npm install gsap

Since the Webflow acquisition all plugins are available without a license key

A quick rundown of GSAP 3.13 capabilities:

- gsap.to / gsap.from / gsap.fromTo / gsap.set — the four basic tween methods

- gsap.timeline() — precise time-axis sequencing

- ScrollTrigger — the #1 scroll-interaction tool. pin, scrub, snap, markers for debugging

- ScrollSmoother — smooth scroll similar to Lenis (previously paid, now free)

- SplitText — split into chars / words / lines for animation (previously paid, now free)

- MorphSVG — morph between SVG paths (previously paid, now free)

- DrawSVG — line drawing effect (previously paid, now free)

- MotionPath — move along a path (previously paid, now free)

- Inertia / Draggable — drag plus momentum (previously paid, now free)

- Flip — layout transitions using the FLIP technique (First, Last, Invert, Play)

A basic example used with React:

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>

}

GSAPs biggest strength is the stability and compatibility built up over nearly 30 years. The tween engine has been tested since the IE era, so it gives consistent results on almost every browser and device. The downside is that integration with React/Vue component models requires manual useEffect cleanup — for that the official `@gsap/react` hook `useGSAP` exists.

When to use GSAP:

- Scroll-driven marketing sites (think Awwwards) — ScrollTrigger is effectively the standard

- Motion graphics with lots of SVG — MorphSVG, DrawSVG, MotionPath

- Complex sequences, card shuffles, text effects

- Games and interactive ads with demanding timing

3. Motion (formerly Framer Motion, Oct 2024 rebrand) — React / Vue / Vanilla

In October 2024 the Framer team rebranded Framer Motion to "Motion." Two things matter.

- Vue and Vanilla JS are now first-class citizens alongside React

- The Motion core (Motion One) is a tiny ~3.8KB library that drives the Web Animations API directly

The legacy `framer-motion` package name still works, but new projects should start from `motion`.

npm install motion

React: import { motion } from "motion/react"

Vue: import { motion } from "motion-v"

Vanilla: import { animate, scroll, inView } from "motion"

A React component example:

export function Card() {

const [open, setOpen] = useState(false)

return (

<>

{open && (

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

exit={{ opacity: 0, y: -20 }}

transition={{ type: 'spring', stiffness: 300, damping: 30 }}

>

Card content

)}

</>

)

}

In Vanilla JS the API is even lighter:

// Basic tween

animate('.card', { opacity: 1, y: 0 }, { duration: 0.5, easing: 'spring' })

// Scroll trigger

scroll(

animate('.parallax', { y: [-200, 200] }),

{ target: document.querySelector('.section') }

)

Motions strengths:

- Small bundle (`motion/mini` is 2.6KB)

- Pairs naturally with Reacts declarative model

- Automatic FLIP transitions via `layoutId` — a powerful feature you do not get elsewhere

- Spring physics is first-class — you can mix duration-based and spring-based transitions freely

When to use Motion:

- Product UI in React/Vue — card transitions, modals, page transitions

- Micro-interactions inside a design system

- Light marketing pages (where you do not need the weight of GSAP scroll work)

GSAP vs Motion is a simple decision. If marketing-site scroll interactions are the main thing, use GSAP. If product-UI card transitions are the main thing, use Motion. Plenty of projects use both.

4. Rive — Interactive + State Machines

Rive is the most interesting animation tool of 2026. It does not just output tweens — it lets you build interactive animations driven by a state machine. If Lottie is "an animation that plays like a video," Rive is "an animation that behaves like a component reacting to user input."

The core building blocks of Rive:

- Rive Editor — desktop and web editor (for designers)

- Rive Runtime — Web (WASM), iOS, Android, Flutter, React Native, Unity

- State Machine — a graph of transitions driven by inputs

- Listeners — direct handling of mouse hover, click, drag

Classic examples include a toggle switch, a character whose eyes follow the cursor, the animal that covers its eyes while a user types a password, an interactive onboarding illustration. Build it once and it behaves identically on every platform.

A web usage example:

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 (

onMouseEnter={() => {

if (isChecking) isChecking.value = true

}}

onMouseLeave={() => {

if (isChecking) isChecking.value = false

}}

/>

)

}

Rives strengths:

- Designers can author the interaction logic themselves (no hand-off to developers)

- .riv files are very small and efficient (vector + bone based)

- Multi-platform (web / mobile / game engines)

- The free plan is generous

The downsides are a learning curve (a different paradigm from Photoshop/Figma) and that for plain motion graphics it may feel more expensive than Lottie. But once you are comfortable with it you can build interactions Lottie simply cannot.

5. Lottie + dotLottie — Airbnbs Standard

Lottie is an animation format Airbnb open-sourced in 2017. With the Bodymovin plugin, designers export an After Effects animation to JSON, and the file plays identically on web/iOS/Android.

The Lottie ecosystem in 2026:

- lottie-web — Airbnbs official web runtime (most stable, heaviest)

- @lottiefiles/react-lottie-player — LottieFiles React wrapper

- @lottiefiles/dotlottie-web — the new runtime for the dotLottie format (Rust + WASM, faster)

- LottieFiles — a huge free + paid animation library plus editor and collaboration tools

dotLottie is a new format introduced by LottieFiles in 2022. The `.lottie` extension is a ZIP of compressed JSON plus assets. It is ~80% smaller than the original `.json`, lets you bundle multiple animations into one file, and supports interactive features like theming and color overrides.

A basic example:

export function LoadingSpinner() {

return (

src="/animations/loader.lottie"

loop

autoplay

style={{ width: 200, height: 200 }}

/>

)

}

Lotties strengths:

- Use After Effects, the industry standard tool, directly

- Build once and ship to web / iOS / Android / React Native / Flutter

- LottieFiles offers hundreds of thousands of free and paid animations

- Dominant for marketing-page illustrations, loading spinners, empty states

Weaknesses:

- Not interactive (it only plays, in contrast with Rive)

- Some After Effects effects are unsupported (motion blur and certain effects)

- Large animations can produce heavy `.json` files — solved by dotLottie

On a typical Korean or Japanese marketing page Lottie is effectively the default. Toss recruiting pages, LINE announcement pages, Yahoo Japan campaign pages — they all use Lottie illustrations.

6. Spline — 3D in the Browser

Spline is often called "the Figma of 3D." You build 3D models, paint materials, and define interactions directly in the browser, then export to a React component.

Spline core features:

- Browser-based 3D editor (no Blender required)

- Unlimited free plan (no watermark)

- @splinetool/react-spline for React embedding

- Define interactions (hover, click, scroll) right inside the editor

- AR export, video export, 3D model export

Basic usage:

export function Hero() {

return (

)

}

Where Spline shines:

- Hero 3D scenes for marketing sites (Vercel, Linear, Arc browser all use it)

- When designers want to create 3D content themselves

- Fast prototyping (no Three.js code)

Downsides:

- Not suitable for complex scenes (lots of polys, fancy shaders)

- Runtime can be heavy — mind mobile optimization

- Cloud dependency (the scene is hosted by Spline)

Spline vs Three.js + R3F is simple. Designer-driven plus a simple scene means Spline; developer-driven plus a complex scene means R3F.

7. Theatre.js — Timeline Editor

Theatre.js is an open-source animation tool made by Cantor Studios. Its standout feature is treating code and a visual editor as a single workflow. It opens an After Effects-style timeline UI in the browser, the designer tunes keyframes visually, the result is saved as JSON, and the code plays back from that JSON.

Core concepts:

- Studio — the visual editor used during development (stripped out for production)

- Sheet — the timeline of a single scene

- Object — an animatable object inside a Sheet (DOM node, R3F mesh, anything)

Basic usage:

// Only mount the studio during development

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) => {

// Apply values.x, values.y, values.rotation, values.opacity to the DOM

logoEl.style.transform = `translate(${values.x}px, ${values.y}px) rotate(${values.rotation}deg)`

logoEl.style.opacity = String(values.opacity)

})

// Play it back

sheet.sequence.play()

Theatre.js strengths:

- Integrates with R3F (React Three Fiber) to drive 3D scenes visually

- Edit keyframes the way you would in After Effects

- Result is JSON you commit to git, so designers and developers contribute to the same PR

When to use it:

- Tuning camera motion in a complex 3D scene visually

- When a designer needs to adjust keyframes directly

- Scroll-driven cinematics on a marketing site

If GSAP ScrollTrigger is "define everything in code," Theatre.js is "define in a timeline UI, play back in code."

8. Anime.js 4 — Modular Rewrite

Anime.js is the lightweight animation library by Julian Garnier that has long been loved as a free alternative to GSAP. In late 2024 v4 shipped with a full modular rewrite.

Anime.js 4 changes:

- Modular imports — bring in only what you need: `animate`, `createTimeline`, `createDraggable`, `stagger`

- Tree-shaking support — smaller bundles

- First-class TypeScript

- New spring physics

Basic usage:

// Simple tween

animate('.card', {

translateY: [-20, 0],

opacity: [0, 1],

duration: 600,

delay: stagger(100),

ease: 'outQuad',

})

// Timeline

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 positioning:

- Lighter than GSAP with a simpler API

- Less React-friendly than Motion but very Vanilla-friendly

- Low learning curve

- A good fit for small to mid-sized projects

Now that GSAP is free there are only two reasons to pick Anime.js: you need a smaller bundle, or you prefer the simpler API.

9. Three.js + R3F — 3D

Three.js is the library Ricardo Cabello (mr.doob) released in 2010 and is the de facto standard for 3D on the web. It is an abstraction layer on top of WebGL that exposes familiar 3D primitives — Scene, Camera, Mesh, Material, Light.

The Three.js ecosystem in 2026:

- three (core) — r170+. WebGPU backend is experimental

- @react-three/fiber (R3F) — React-friendly wrapper (by the Poimandres team)

- @react-three/drei — a utility belt for R3F (camera controls, shaders, helpers)

- @react-three/postprocessing — post-processing (bloom, DOF, noise)

- @react-three/rapier — wrapper around the Rapier physics engine

- @react-three/cannon — wrapper around Cannon-es

- leva — debug GUI for R3F

The standard R3F pattern:

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 (

)

}

export function Scene() {

return (

)

}

Three.js vs Spline:

- Three.js + R3F — code-based, infinite freedom, steep learning curve

- Spline — GUI-based, fast results, limited freedom

Complex games, metaverse experiences, and data visualization (think Globe.gl, three-globe) lean on Three.js; marketing-site hero 3D often goes to Spline.

10. Lenis — The Smooth Scroll Standard

Lenis is a smooth scroll library by Studio Freight (now Darkroom Engineering). Since shipping in 2023 it has quickly become the de facto standard for web animation.

Lenis traits:

- Lightweight (~3KB)

- Compatible with native scroll events (window scroll listeners still work)

- Mobile friendly

- Plays perfectly with GSAP ScrollTrigger

Basic usage:

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)

Wiring it to GSAP ScrollTrigger:

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

gsap.ticker.add((time) => {

lenis.raf(time * 1000)

})

gsap.ticker.lagSmoothing(0)

When to use it:

- Almost every marketing or portfolio site — 80% of Awwwards winners use Lenis or GSAP ScrollSmoother

- Any site where scroll-driven interaction is central

When not to use it:

- Sites where accessibility is the top priority — smooth scroll can confuse keyboard and screen reader users

- Long text-heavy sites — native scroll feels more natural

- Always disable when the user sets prefers-reduced-motion

The 2026 trend is "ship Lenis by default, but honor prefers-reduced-motion."

11. AutoAnimate / Mo.js / Tween.js — The Rest

You will rarely use the full web animation stack, but here are the other tools worth knowing.

AutoAnimate — Formkits zero-config transition library. When children of a React/Vue/Svelte container are added, removed, or moved, it adds smooth transitions automatically.

export function TodoList({ todos }: { todos: string[] }) {

const [parent] = useAutoAnimate()

return (

{todos.map((todo, i) => (

))}

)

}

The strength is "one line of code," the weakness is very limited control. Reach for it when you want a quick polish.

Mo.js — a motion graphics-focused library. Great for particles, bursts, shape morphing — anything cinematic. The user base is smaller now but it still has fans.

Tween.js — the oldest tween engine (since 2010). Often paired with Three.js. Reach for it when you need a tiny, precise tween controller.

Popmotion — the predecessor to Motion. Now folded into Motion. If you are starting fresh, use Motion.

react-spring — the React spring library by Pmndrs (Poimandres). More flexible than Motions springs but harder to learn.

Animate.css — a pure CSS animation class library. Lightest possible footprint with limited control. Useful for fast prototypes.

12. Web Animations API + CSS Scroll-Driven — Native

The native APIs the browser ships have become very strong in 2026. You can do a lot without any library.

Web Animations API (WAAPI) — supported in every modern browser.

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('Animation finished')

}

The Motion core is built on WAAPI, so using Motion is effectively using WAAPI efficiently.

CSS scroll-driven animations — supported in Chrome/Edge 105+, Safari 17.5+, Firefox 132+ since late 2024. Scroll-driven animations now work without JavaScript.

@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%;

}

That single declaration gives you a scroll-in-view animation — no GSAP ScrollTrigger required. The catch is Firefox added support late and you cannot express complex interactions.

View Transitions API — smooth transitions between pages or routes. Supported in Chrome 111+ and Safari 18+. Next.js and Astro are starting to use it for route transitions.

// Start a View Transition

if ('startViewTransition' in document) {

document.startViewTransition(() => {

// DOM updates

document.body.classList.toggle('dark-mode')

})

}

The 2026 trend is "native first, Motion when native is not enough, GSAP when even Motion is not enough."

13. Design to Code — After Effects to Lottie, Rive Editor, Spline Editor

The real distinction between these animation tools is how work crosses from designer to developer.

The traditional flow — designer builds in After Effects, developer recreates it in GSAP.

Designer: After Effects (.aep) -> video export (mp4)

Developer: watch the video, rebuild it in GSAP

Result: designers motion and developers result diverge, endless revisions

Lottie flow — extract After Effects to JSON via the Bodymovin plugin and play the same file on web/mobile.

Designer: After Effects + Bodymovin -> animation.json

Developer: render with lottie-web

Result: the designers motion is reproduced pixel-perfect

Rive flow — author in Rive Editor with a state machine, export .riv, bind inputs in the runtime.

Designer: Rive Editor -> character.riv (with state machine)

Developer: bind inputs with @rive-app/react-canvas

Result: designer defines interaction logic, developer only wires up data

Spline flow — build 3D in Spline Editor, define interactions, export scene.splinecode.

Designer: Spline (3D modeling + materials + interactions)

Developer: embed via @splinetool/react-spline

Result: the designer ships a 3D marketing page on their own

Theatre.js flow — define objects in code, tune keyframes in the visual editor, commit JSON to git.

Developer: open Theatre Studio, declare the objects

Designer (or developer): tune keyframes in the timeline UI -> save

Result: designer and developer contribute to the same PR, JSON is version controlled

Large marketing campaigns typically combine Lottie and GSAP; product interactive characters use Rive; 3D heroes use Spline; cinematic scroll sequences use Theatre.js plus R3F. Those four patterns cover most of 2026 production.

Beyond After Effects, more design tools now integrate. Cavalry (a motion design tool) supports Lottie export, and Figma can also export Lottie through Smart Animate plus plugins. Adobe Animate (formerly Flash) still appears in some ads and games.

14. Korean and Japanese Design Systems — Toss, Kakao, pixiv, CyberAgent

Lets look at which tools the big Korean and Japanese companies actually use.

Toss — Toss design system micro-interactions lean on Framer Motion (Motion) plus Lottie. The check-mark animation after a successful transfer, loading spinners, and ad banners are mostly Lottie. Page transitions and card or modal entrances are Motion. Designers at Toss reportedly run frequent workshops on "how to export Lottie .json files accurately."

Kakao — KakaoTalks emoticons are already a huge animation system, and on the web (Daum, KakaoBank, KakaoPay) the staple is Lottie plus CSS transitions. The card-expansion animation in KakaoBank is known to be GSAP-driven.

LINE — In the Japanese market LINE dominates. LINE Sticker animations use their own format (APNG, later a custom video format), and the web (line.me, LINE Pay Japan) uses Lottie as standard.

Yahoo Japan — After the LINE-Yahoo merger marketing pages use Lottie plus GSAP. Ad banners go through an internal pipeline built on Bodymovin.

pixiv — Japans illustration social network. Magazine-style pages like pixivision use GSAP scroll plus Lottie illustrations. Because the audience is illustrators, the animation tone is restrained "so it does not get in the way of user content."

CyberAgent — Japans advertising and gaming conglomerate. Subsidiaries (AbemaTV, Tap Sports Baseball) use a wide variety of tools. The CyberAgent Developers Blog regularly publishes "We adopted Lottie" or "We built a Three.js game page" posts.

SmartNews — Japans news app. They use Rive for interactive characters on web marketing pages.

ZOZO — Japans fashion e-commerce site. The 3D rotating product view on product pages is built on Three.js.

Baemin (Woowa Brothers) — Korea. Lottie is used aggressively across marketing pages, and they are reportedly experimenting with Rive for interactive character motion (paired with the Baemin custom typeface).

Daangn (Carrot) — Korea, the local secondhand and community app. Micro-interactions lean on Framer Motion (Motion), and ad pages lean on Lottie.

Coupang — Korea. As a massive e-commerce site performance comes first, so heavy animations are kept to a minimum — mostly CSS transitions plus a sparing use of Lottie.

NAVER — Koreas large portal alongside Daum. The internal design system (Naver D2) standardizes on Motion plus Lottie.

15. Who Should Pick What — Marketing / Product / Games / Learning Material

Finally, a use-case oriented recommendation.

Marketing sites (Awwwards-style, campaign pages)

- Top choice: GSAP 3.13 + ScrollTrigger + Lenis

- Illustrations: Lottie / dotLottie

- 3D hero: Spline (simple) or Three.js + R3F (complex)

- Cinematic scroll: Theatre.js + R3F

Product UI (SaaS, apps)

- Top choice: Motion (formerly Framer Motion)

- Auto transitions: AutoAnimate

- Loading / empty states: Lottie

- Interactive characters (onboarding, payment mascots): Rive

Games and interactive content

- 2D interactive characters: Rive

- 3D games: Three.js + R3F + Rapier (physics)

- Ads / mini-games: custom canvas + GSAP (timing) + Mo.js (effects)

Learning material / education

- Interactive diagrams: Rive (state machines suit pedagogy)

- Code-driven visualization: d3.js + Motion

- Illustrations: Lottie

Performance first

- Native CSS animations plus scroll-driven animations

- If a library is needed: Motion mini (2.6KB)

- Lenis (3KB) alone for smooth scroll

Minimum bundle size

- Vanilla — Web Animations API + CSS only

- One library — Motion or Anime.js 4 modular

- GSAP is free, but the core plus ScrollTrigger alone runs to ~50KB

Enterprise / stability

- GSAP 3.13 — ~30 years of validation

- Lottie (lottie-web) — maintained by Airbnb

- Motion — backed by Framer

Brand consistency

- Single tool for consistency — Motion (product plus marketing)

- Or the two-stack approach — GSAP (marketing) plus Motion (product)

A typical best-of-breed 2026 setup looks like this. Motion for 80% of product UI, Lottie for 100% of illustrations, GSAP + ScrollTrigger + Lenis for marketing-page scroll interactions, and Rive or Spline added as needed. That combo covers nearly every scenario.

16. References

GSAP

- GSAP — https://gsap.com/

- GSAP 3 cheat sheet — https://gsap.com/cheatsheet/

- ScrollTrigger docs — https://gsap.com/docs/v3/Plugins/ScrollTrigger/

- "GSAP is Joining Webflow" announcement (2024-11) — https://gsap.com/blog/webflow-gsap

- "GSAP is now 100% Free" — https://gsap.com/blog/gsap-free

Motion

- Motion — https://motion.dev/

- Motion for React docs — https://motion.dev/docs/react

- Motion announcement (2024-10) — https://motion.dev/blog/introducing-motion

- Framer Motion (legacy) — https://www.framer.com/motion/

Rive

- Rive — https://rive.app/

- Rive docs — https://rive.app/community/doc/introduction/docvuOuY7Q3

- @rive-app/react-canvas — https://www.npmjs.com/package/@rive-app/react-canvas

- State Machine guide — https://rive.app/community/doc/state-machines/docXOTk6cetD

Lottie

- LottieFiles — https://lottiefiles.com/

- lottie-web (Airbnb) — https://github.com/airbnb/lottie-web

- dotLottie format — https://dotlottie.io/

- @lottiefiles/dotlottie-web — https://www.npmjs.com/package/@lottiefiles/dotlottie-web

Spline

- Spline — https://spline.design/

- @splinetool/react-spline — https://www.npmjs.com/package/@splinetool/react-spline

- Spline docs — https://docs.spline.design/

Theatre.js

- Theatre.js — https://www.theatrejs.com/

- Theatre.js GitHub — https://github.com/theatre-js/theatre

Anime.js

- Anime.js — https://animejs.com/

- Anime.js GitHub — https://github.com/juliangarnier/anime

Three.js + R3F

- Three.js — https://threejs.org/

- React Three Fiber (R3F) — https://docs.pmnd.rs/react-three-fiber/

- drei utilities — https://github.com/pmndrs/drei

Lenis

- Lenis — https://lenis.darkroom.engineering/

- Lenis GitHub — https://github.com/darkroomengineering/lenis

AutoAnimate / others

- AutoAnimate (Formkit) — https://auto-animate.formkit.com/

- Mo.js — https://mojs.github.io/

- Tween.js — https://github.com/tweenjs/tween.js

- react-spring — https://react-spring.dev/

Web standards

- Web Animations API (MDN) — https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

- CSS scroll-driven animations (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations

- View Transitions API (MDN) — https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

Design systems / Korea + Japan case studies

- Toss Design — https://toss-design.com/

- Kakao Design — https://design.kakao.com/

- CyberAgent Developers Blog — https://developers.cyberagent.co.jp/blog/

- LINE Developers — https://engineering.linecorp.com/en

- pixiv inside — https://inside.pixiv.blog/