웹 모션 라이브러리·브라우저 API
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
CSS 트랜지션 CSS Transitions
스타일 값 변화 사이를 지정 시간·이징으로 연결하는 기능.
호버·토글·단순 상태 전환.
별도 설치 라이브러리가 아니며 속성별 보간 가능 여부가 다르다.
뷰 트랜지션 API View Transition API
이전·다음 뷰의 표현을 이용해 문서·상태 전환을 구성하는 API.
페이지·DOM 상태 전환.
기능별 지원 범위와 폴백을 확인한다.
GSAP GSAP
트윈·타임라인과 플러그인으로 복합 애니메이션을 구성하는 도구.
정교한 웹·SVG·수치 애니메이션.
각 플러그인과 사용 방식의 현재 이용 조건을 확인한다.
Motion Motion
요소·레이아웃·스크롤·제스처 애니메이션을 다루는 라이브러리 제품군.
웹 UI 전환·인터랙션.
일반 명사 motion과 제품명을 구분하고 플랫폼별 API를 확인한다.
Anime.js Anime.js
웹 속성·SVG·타임라인 등 다양한 애니메이션을 제어하는 도구.
UI·로고·복합 웹 모션.
메이저 버전별 API 차이를 확인한다.
React Spring React Spring
스프링 기반의 움직임을 React에서 구성하는 라이브러리.
물리감 있는 UI·인터랙션.
플랫폼별 패키지와 스프링 파라미터를 확인한다.
Lottie Web Lottie Web
Lottie 애니메이션 데이터를 웹에서 재생하는 런타임.
로딩·아이콘·설명 모션.
제작 도구의 모든 기능이 모든 렌더러에서 재생되는 것은 아니다.
Rive 런타임 Rive Runtimes
Rive에서 만든 인터랙티브 그래픽을 앱에서 재생·제어하는 런타임 제품군.
상태 기반 아이콘·캐릭터·UI.
제작 에디터와 런타임을 구분하고 지원 기능을 플랫폼별로 확인한다.
AutoAnimate AutoAnimate
자식 요소의 추가·제거·이동에 자동 전환을 적용하는 유틸리티.
간단한 목록·레이아웃 애니메이션.
임의의 복잡한 시네마틱 타임라인을 대신하는 도구는 아니다.
Animate.css Animate.css
미리 정의된 등장·퇴장·주의 환기 애니메이션 클래스 모음.
간단한 웹 모션 프리셋.
접근성·빈번한 반복·클래스 재실행 처리를 검토한다.
tsParticles tsParticles
웹의 입자·연결선·상호작용형 배경 효과를 구성하는 라이브러리.
랜딩 페이지·배경·장식 효과.
게임 엔진의 범용 3D VFX 시스템과 동일한 용도로 보지 않는다.
Tween.js Tween.js
객체의 수치 속성을 시간에 따라 보간하는 트위닝 도구.
3D 파라미터·수치·커스텀 모션.
CreateJS의 TweenJS와 이름이 비슷한 별도 프로젝트다.
CSS 애니메이션 CSS Animations
키프레임과 재생 속성으로 스타일 애니메이션을 정의하는 기능.
반복·다단계·아이콘 모션.
CSS 언어 기능이며 JavaScript 라이브러리와 구분한다.
웹 애니메이션 API Web Animations API
DOM 애니메이션의 타이밍·재생·취소 등을 스크립트로 제어하는 API.
프로그래밍 가능한 웹 모션.
개별 메서드와 브라우저 지원 범위를 확인한다.
GSAP ScrollTrigger GSAP ScrollTrigger
스크롤 위치와 애니메이션 재생·고정 등을 연결하는 GSAP 플러그인.
스크롤 스크러빙·핀 연출.
브라우저 기본 ScrollTimeline API와는 별개다.
GSAP Flip GSAP Flip
상태 변경 전후 레이아웃 차이를 바탕으로 FLIP 전환을 구성하는 플러그인.
재정렬·컨테이너 이동.
일반 FLIP 기법과 특정 제품 플러그인을 구분한다.
Web Motion Libraries & Browser APIs
Open an entry for its visual reference, comparisons and source-language text.
CSS Transitions CSS 트랜지션
A feature interpolating between style values over a specified duration and easing curve.
Hover, toggle, and simple state transitions.
This is not a separately installed library. Whether interpolation is possible depends on the property.
View Transition API 뷰 트랜지션 API
An API for constructing document or state transitions from representations of the old and new views.
Page and DOM-state transitions.
Check feature-specific support and fallbacks.
GSAP GSAP
An animation toolkit combining tweens, timelines, and plugins for complex motion.
Precise web, SVG, and numeric animation.
Check current terms for each plugin and usage method.
Motion Motion
A library family for element, layout, scroll, and gesture animation.
Web interface transitions and interactions.
Distinguish the generic word motion from the product name, and check platform-specific APIs.
Anime.js Anime.js
A tool controlling animations of web properties, SVG, and timelines.
Interface, logo, and composite web motion.
Check API differences between major versions.
React Spring React Spring
A library for spring-based motion in React.
Physically responsive interfaces and interactions.
Check platform-specific packages and spring parameters.
Lottie Web Lottie Web
A runtime playing Lottie animation data on the web.
Loading, icon, and explanatory motion.
Not every feature in an authoring tool can play in every renderer.
Rive Runtimes Rive 런타임
A family of runtimes for playing and controlling interactive graphics authored in Rive.
State-driven icons, characters, and interfaces.
Distinguish the authoring editor from its runtime, and verify supported features for each platform.
AutoAnimate AutoAnimate
A utility automatically animating child-element insertion, removal, and movement.
Simple list and layout animation.
This is not a replacement for arbitrary complex cinematic timelines.
Animate.css Animate.css
A collection of predefined entrance, exit, and attention-animation classes.
Simple web animation presets.
Review accessibility, frequent repetition, and how class-based animations restart.
tsParticles tsParticles
A library building particle, connecting-line, and interactive background effects for the web.
Landing-page backgrounds and decorative effects.
Do not treat this as a general-purpose 3D VFX system within a game engine.
Tween.js Tween.js
A tweening tool interpolating an object's numeric properties over time.
3D parameters, numeric values, and custom motion.
This is a separate project with a name similar to CreateJS TweenJS.
CSS Animations CSS 애니메이션
A feature defining style animation through keyframes and playback properties.
Looping, multistage, and icon animations.
This is a CSS language feature rather than a JavaScript library.
Web Animations API 웹 애니메이션 API
An API for controlling DOM animation timing, playback, and cancellation through scripts.
Programmable web animations.
Check support for individual methods and browsers.
GSAP ScrollTrigger GSAP ScrollTrigger
A GSAP plugin connecting scroll position with animation playback, pinning, and related behavior.
Scroll scrubbing and pinned sequences.
This is distinct from the browser's native ScrollTimeline API.
GSAP Flip GSAP Flip
A plugin building FLIP transitions from layout differences before and after a state change.
Reordering and moving between containers.
Distinguish the general FLIP technique from a particular product plugin.