2019 년에 자주 사용되었던 무료 JavaScript Animation Libraries 중 일부를 살펴볼 것입니다. 웹 사이트가 등장한 이래로 웹 애니메이션이 있습니다. 초창기에는 웹용 애니메이션 용도로 플래시를 사용했습니다. 그 기간 동안 Flash로 만든 웹 사이트는 매우 인기가 있었습니다. 플래시의 주요 단점은 파일 크기였습니다. 이제는 상황이 바뀌었고 현재는 플래시 웹 사이트는 거의 사라졌습니다.
이제는 효율적이고 가벼운 웹 애니메이션에 자바 스크립트를 사용하기 시작했습니다.
현재 애니메이션 목적으로 CSS와 SVG를 사용하고 있습니다. 그러나 고급 애니메이션을 만들려면 여전히 JavaScript가 필요로 합니다. 이 챕터에서는 무료로 사용할 수 있는 자바스크립트 애니메이션 라이브러리 5가지 홈페이지 사이트를 소개해드리겠습니다.
Anime.js
Anime는 CSS 속성, 개별 CSS 변환, SVG 또는 DOM 속성 및 JavaScript 객체와 함께 작동하는 JavaScript 애니메이션 라이브러리입니다. 이 라이브러리를 사용하면 여러 애니메이션 속성을 연결하고 여러 인스턴스를 함께 동기화하며 타임 라인 등을 만들 수 있습니다.
KUTE.js
KUTE.js는 크로스브라우저 애니메이션을 위한 필수 기능을 갖춘 완전히 초기화된 네이티브 자바스크립트 애니메이션 엔진입니다. 코드 품질, 유연성, 성능 및 크기(코어 엔진은 17k min, 5.5k gziped)입니다. 라이브러리는 또한 확장 가능하기 때문에 자신만의 추가기능을 추가 할 수 있습니다.
Velocity.js
Velocity는 jQuery의 $.animate()와 동일한 API를 가진 빠른 Javascript 애니메이션 엔진입니다. 컬러 애니메이션, 변환, 루프, 이음새, SVG 서포트, 스크롤링 등이 특징입니다. 여기 Velocity의 고성능 엔진에 대한 설명이 있고, 여기 라이브러리를 이용한 SVG 애니메이션에 대한 소개가 있습니다.
Typed.js
Typed.js는 기본적으로 선택된 속도로 문자열의 입력 애니메이션을 만들 수 있도록 해줍니다. 또한 검색 엔진과 JavaScript가 비활성화된 사용자에 대한 접근을 허용하기 위해 페이지에 HTML div를 배치하고 그 페이지에서 읽을 수 있습니다. 슬랙을 사용하는 사람들에게 유용하고 인기 많은 라이브러입니다.
GSAP
GSAP는 4 백만 개가 넘는 웹 사이트에서 사용되는 고성능라이브러리입니다. 브라우저 간 애니메이션을 만들기위한 JavaScript 라이브러리입니다. GSAP는 유연하며 React, Vue, Angular 및 vanilla JS와 함께 작동합니다. GSDevtools 는 GSAP를 사용하여 빌드 된 dubug 애니메이션을 도울 수도 있습니다.