웹 모션·스크롤·효과
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
Popmotion Popmotion
수치 애니메이션·스프링·관성 등을 제공하는 애니메이션 도구.
세밀한 모션 동작 구현.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Lenis Lenis
스크롤 입력과 표시를 조율하는 스무스 스크롤 도구.
스크롤 연출이 필요한 사이트.
기본 스크롤·키보드·감소된 모션 설정을 해치지 않도록 검증한다.
AOS AOS
요소가 스크롤로 나타날 때 지정한 애니메이션을 적용하는 도구.
콘텐츠 섹션의 등장 연출.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
canvas-confetti canvas-confetti
캔버스 기반 색종이 효과를 생성하는 라이브러리.
완료·축하 피드백.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Typed.js Typed.js
텍스트를 타이핑하듯 표시하는 애니메이션 라이브러리.
짧은 제목·설명 연출.
서버 응답을 점진 수신하는 스트리밍과 다른 시각 효과다.
Web Motion, Scrolling & Effects
Open an entry for its visual reference, comparisons and source-language text.
Popmotion Popmotion
An animation toolkit providing numeric animation, springs, inertia, and related behavior.
Fine-grained motion behavior.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Lenis Lenis
A smooth-scrolling tool coordinating scroll input with visual presentation.
Sites requiring choreographed scrolling.
Verify that native scrolling, keyboard use, and reduced-motion preferences remain usable.
AOS AOS
A tool applying specified animations as elements enter view during scrolling.
Content-section entrance effects.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
canvas-confetti canvas-confetti
A library generating canvas-based confetti effects.
Completion and celebration feedback.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Typed.js Typed.js
A library animating text as though it were being typed.
Short heading and explanation effects.
This visual effect differs from progressively receiving a server response.