쓸만한 자바스크립트 라이브러리를 찾고 있던 중에 git 허브의 스타 순으로 작성된 아래의 목록을 찾을 수 있었습니다. 이 시간에서는 웹개발시에 유용하게 사용할 수 있는 자바스트립트 애니메이션 라이브러리 11개를 소개합니다.
1. Three.js
GitHub에서 43,000 스타를 넘는이 인기의 라이브러리는 브라우저에서 실행 가능한 WebGL을 이용한 3D 애니메이션을 직관적으로 만들 수있는 훌륭한 라이브러리입니다. 이 라이브러리는 ,,, CSS3D, WebGL 렌더러를 제공하고 장치와 브라우저를 넘고 개발자가 풍부하고 사용자가 조작하기 쉬운 화면을 개발할 수 있도록합니다. 2010 년 4 월에 공개된 이 라이브러리는 현재 약 1000 명의 기여자에 의해 개발되고 있습니다.
mrdoob / three.js
three.js - JavaScript 3D library.
github.com
2. Anime.js
20,000 스타 이상의 Anime.js는 CSS 속성, CSS transform, SVG와 DOM 요소의 속성, JavaScript 객체를 사용하여 동작하는 JavaScript 애니메이션 라이브러리입니다. 이 라이브러리를 사용하면 여러 애니메이션 속성을 체인하거나 여러 인스턴스를 동기화하고 타임 라인을 생성 할 수 있습니다.
juliangarnier / animeanime - JavaScript Animation Enginegithub.com
3. Mo.js
14,000 스타를 획득하는이 라이브러리는 간단한 선언적 API 장치 간의 호환성, 그리고 1,500 개 이상의 단위 테스트를 갖춘 웹 용 모션 그래픽 툴 벨트입니다. DOME 또는 SVG DOME 주위에서 객체를 이동하거나 자신의 mo.js 객체를 생성 할 수 있습니다. 문서는 조금 적지 만 샘플 코드는 풍부하고 CSS tricks에는 이러한 소개 기사 도 있습니다.
legomushroom / mojs
mojs - motion graphics toolbelt for the web
github.com
4. Velocity
15,000 스타를 획득하는 Velocity는 jQuery의 $ .animate ()와 같은 API를 가진 빠른 Javascript 애니메이션 엔진입니다. 컬러 애니메이션, 변형, 루프, 여유, SVG 지원과 스크롤이 특징입니다. Velocity의 고성능 엔진의 상세 와 라이브러리를 사용한 SVG 애니메이션의 소개는 아래 링크 참조.
julianshapiro / velocity
velocity - Accelerated JavaScript animation.
github.com
5. Popmotion
14,000 스타를 획득하는이 라이브러리는 기능적으로 반응성이 높은 애니메이션 라이브러리에서 그 크기는 불과 11kb입니다. 이 라이브러리는 CSS, SVG, React, three.js 등 숫자를 입력으로 받아 어떤 API에서도 액션이라는 것을 만들 수 있습니다. 액션은 기동 · 정지가 가능한 일련의 값 모임에서 개발자는이를 사용하여 애니메이션과 상호 작용을 만들 수 있습니다.
Popmotion / popmotion
popmotion - A functional, reactive animation library.
github.com
6. Vivus
10,000 스타 이상의 Vivus는 SVG를 선으로 그려 나가는 애니메이션을 만들 수있는 의존성이없는 JavaScript 클래스입니다. 기성품 애니메이션 중에서 선택하여 사용하거나 사용자 지정 스크립트를 사용하여 SVG를 그리는 애니메이션을 직접 만들 수 있습니다. 라이브 샘플이나 실습은 Vivus - instant 에서 확인해주세요.
maxwellito / vivus
vivus - JavaScript library to make drawing animation on SVG
github.com
7. GreenSock JS
GSAP는 400 만 이상의 Web 사이트에서 사용되고 있다고하는 크로스 브라우저 애니메이션을 만들기위한 고성능의 의존성이없는 JavaScript 라이브러리입니다. GSAP는 매우 유연하고 React, Vue, Angular, vanilla JS에 대응하고 있습니다. 또한 GSDevtools 에서는 GSAP를 사용하여 만든 애니메이션을 쉽게 디버깅 할 수 있습니다.
8. Scroll Reveal
15,000 스타를 획득하는이 라이브러리는 Web이나 모바일 브라우저에서 스크롤 할 때 요소가 표시되어가는 스크롤 애니메이션을 쉽게 만들 수있는 의존성이없는 라이브러리입니다. 이 라이브러리는 몇 가지 멋진 디스플레이 효과에 대응하고, 나아가 자연 언어를 사용하여 애니메이션을 정의 할 수 있습니다. SitePoint tutorial 에 간단한 튜토리얼이 있습니다.
jlmakes / scrollreveal
scrollreveal - Easy scroll animations for web and mobile browsers.
github.com
9. Hover (CSS)
이것은 CSS 라이브러리입니다. 20,000 스타를 획득하는 Hover는 CSS3를 사용하여 호버 효과의 컬렉션을 제공하고, 링크, 버튼, 로고, SVG 이미지에 적용 할 수 있습니다. 이 라이브러리는 CSS, Sass, 그리고 LESS 사용할 수 있습니다. 이 라이브러리는 사용하고 효과만을 당신의 스타일 시트에 붙여 사용하거나 또는 단순히 레퍼런스로 사용할 수 있습니다.
10. Kute.js
이 라이브러리는 크로스 브라우저 애니메이션에 필수적인 기능을 갖춘 본격적인 네이티브 JavaScript 애니메이션 엔진입니다. 코드 품질, 유연성, 성능, 그리고 그 크기 (코어 엔진은 17k gzip으로 압축 버전은 5.5k)에 중점을두고 있습니다 우퍼 데모 는 여기에서. 라이브러리는 확장 가능 하기 때문에 자신의 기능을 추가 할 수 있습니다.
11. Typed.js
6000 스타를 획득하는 라이브러리에서는 문자열이 타자가되어가는듯한 애니메이션을 자유로운 선택한 속도로 만들 수 있습니다. 또한 페이지에 HTML의 div 요소를 배치하고 거기에서로드하는 것으로, 검색 엔진 및 JavaScript를 사용하는 사용자도 액세스 할 수 있습니다. Slack 등에도 사용되고있는이 라이브러리는 매우 인기가 있으며, 또한 놀랍게도 편리합니다.
mattboldt / typed.js
typed.js - A JavaScript Typing Animation Library
github.com
추가 : Lottie by Airbnb
Lottie는 Web과 iOS 용 모바일 라이브러리에서 json으로 내 보낸 Adobe After Effects 의 애니메이션을 Bodymovin 에서 분석하고 기본적으로 렌더링 할 수 있습니다.