JavaScript 애니메이션 라이브러리: 인기 있는 10가지 선택

저는 다양한 애니메이션 효과, 특히 간단하고 CSS로 구현할 수 있는 효과를 실험하는 것을 좋아합니다. 그러나 더 넓은 그림을 보면 CSS 애니메이션은 그 정도까지만 가능합니다. 그리고 복잡하고 인터랙티브한 사용자 경험을 만들고 싶다면 조만간 JavaScript로 전환해야 합니다.

애니메이션 효과에 JavaScript를 사용하는 주요 이점은 훨씬 더 많은 애니메이션 논리를 제어할 수 있다는 것입니다. 여기에는 전환의 유동성, DOM 상태 및 응답 제어, WebGL 덕분에 2D 및 3D 그래픽 사용이 포함됩니다.

JavaScript 애니메이션 라이브러리의 유형

따라서 JS 애니메이션 라이브러리는 다양한 형태와 형태로 제공되기 때문에 특정 초점 영역을 좁히는 데 실제로 도움이 됩니다. 많은 엔진과 프레임워크는 프론트엔드 뿐만 아니라 게임을 만들고 다른 대화형 콘텐츠를 만드는 데에도 사용됩니다.

이 특정 요약에서 필자는 프론트엔드 개발에 가장 일반적으로 사용되는 라이브러리에 초점을 맞춥니다. 라이브러리는 자체적으로 또는 현재 프레임워크와 함께 사용합니다.

시간이 지나면 이 목록에 더 작은 규모의 라이브러리를 추가하는 것을 고려할 것입니다. 이 라이브러리는 여전히 프로젝트에 대화형 애니메이션을 추가하는 의미 있는 방법을 제공합니다.

각 라이브러리에는 웹 사이트 및 GitHub 페이지에 대한 링크가 있습니다. 또한 이 페이지에서 실행할 수 있는 CodePen 예제와 자습서 또는 비디오 가이드인 추가 리소스를 추가했습니다.

#1 – Three.js

Three.js는 창의적인 웹사이트 개발에 사용하는 3D 애니메이션 효과를 만들기 위한 라이브러리입니다. Three.js를 사용하면 개발자가 WebGL에 대해 배울 필요가 없으며 대신 복잡성 없이 대화형 3D 효과를 만드는 데 집중할 수 있습니다.

고급형에서 Three.js는 Mozilla Hubs와 같은 대화형 가상 경험을 만드는 데 사용됩니다. 또한 라이브러리는 몰입형 랜딩 페이지 경험을 만드는 데 자주 활용됩니다. 세계적 수준의 게시자와 사설은 Three.js를 사용하여 동적 업데이트가 포함된 데이터 기반 페이지를 구축했습니다.

홈페이지를 방문하면 수많은 강조된 프로젝트가 나열되어 있어 이 라이브러리가 일상적인 환경에서 어떻게 사용되는지에 대한 많은 영감/명확성을 제공할 것입니다.

Three.js 예제 애니메이션

CodePen에서 CP Designer(@cpandya)의 Pen Mesh Line Waves Background – THREE.js를 참조하십시오.

Three.js 추가 리소스

• GitHub 글로브를 구축한 방법
• Three.js를 사용한 픽셀 왜곡 효과

#2 – Anime.js

Julian Garnier의 Anime.js는 애니메이션을 웹 기반 프로젝트에 통합하기 위한 두 번째로 잘 알려진 라이브러리일 것입니다. 인기 있는 것은 CSS, SVG 및 DOM 요소에 애니메이션을 적용하는 프로세스를 가속화하는 데 도움이 되는 도구가 내장되어 있기 때문입니다.

예를 들어, @keyframes 를 직접 작성하는 것과는 대조적으로 특정 CSS 선택기를 대상으로 한 다음 JavaScript를 통해 세련된 애니메이션 논리를 적용할 수 있습니다.

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

위의 스니펫만으로 다음과 같은 효과를 만들 수 있습니다.

CSS로 이 작업을 수행하려면 각 개별 그리드 블록을 선택하고 이에 대한 별도의 논리를 작성해야 합니다. 비현실적일 뿐만 아니라 많은 작업이 필요합니다. Anime.js 문서 페이지에서 유사한 예제를 많이 찾을 수 있습니다. 그리고 아래의 데모는 이 라이브러리를 현대 프론트엔드 개발에 어떻게 사용할 수 있는지 보여주기 위해 한 단계 더 나아갑니다.

Anime.js 예제 애니메이션

CodePen에서 Julian Garnier(@juliangarnier)의 Pen anime.js 로고 애니메이션을 참조하십시오.

Anime.js 추가 리소스

• Anime.js 튜토리얼 – 10분 안에 자바스크립트 애니메이션 엔진
• Anime.js를 사용한 사용자 인터페이스 애니메이션

#3 – 팝모션

Popmotion은 TypeScript로 작성된 저수준 애니메이션 라이브러리입니다. 또한 React 프로젝트에서 사용되는 인기 있는 Framer Motion(이 기사에 나열되어 있음) 라이브러리를 구동하는 라이브러리입니다. 의견이 없는 상태에서 Popmotion을 사용하여 사용하려는 추가 기능을 작성하여 사용자 정의 효과를 통합할 수 있습니다.

이름에서 알 수 있듯이 Popmotion은 다양한 모션 기반 애니메이션을 사용하여 사용자 인터페이스 요소를 애니메이션하는 데 특히 좋습니다. 여기에는 여유, 스프링, 키프레임 및 더 복잡한 전환 효과와 같은 효과가 포함됩니다. 아래 예는 구성 요소에 대한 애니메이션 효과의 실제 적용을 잘 보여줍니다.

팝모션 예제 애니메이션

CodePen에서 Arden(@aderaaij)의 Pen Popmotion 데모를 참조하십시오.

팝모션 추가 리소스

• React 및 Popmotion.io로 팬케이크 알고리즘 시각화
• 팝모션으로 앵귤러 앱에 스프링 애니메이션 추가하기

#4 – mo.js

Mo.js는 모션 그래픽에 중점을 두고 있으며 독립적인 프로젝트뿐만 아니라 React와 같은 프레임워크에서도 구현할 수 있는 간단한 코드 구조를 제공하는 데 탁월합니다.

그리고 Mo.js는 자체 선언적 API와 함께 제공되므로 애니메이션의 각 단계를 제어할 수 있습니다. 여기에는 달성하고자 하는 것에 대한 논리뿐만 아니라 거기에 도달하는 방법도 정의하는 것이 포함됩니다. 라이브러리에는 시각적으로 풍부한 사용자 경험을 위해 맞춤화된 미리 만들어진 구성 요소와 예제가 포함되어 있습니다.

다음은 샘플 스니펫입니다.

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

보시다시피 많은 논리가 미리 정의되어 있습니다. 따라서 자신의 아이디어를 생각해 낼 필요 없이 제공된 속성을 메모하고 방법을 구축할 수 있습니다. 문서의 자습서 섹션에는 일상적인 웹 페이지 요소에 작지만 의미 있는 애니메이션을 추가하는 효과, 특히 실용적인 응용 프로그램의 몇 가지 예가 있습니다.

mo.js 예제 애니메이션

CodePen에서 Mike Quinn(@mprquinn)이 작성한 Pen Link Hover Effects w/ mo.js를 참조하십시오.

mo.js 추가 리소스

• React에서 MoJS를 사용하는 방법
• MoJS 이해하기

#5 – p5.js

p5.js는 프로세싱의 JavaScript 구현으로, 비주얼 아티스트가 사용하기 위한 별도의 "언어"입니다. 지금까지 본 일부 예제와 달리 p5.js는 실용적인 응용 프로그램뿐만 아니라 보다 강력하고 복잡한 프로젝트를 위한 솔루션을 제공하는 범용 애니메이션 라이브러리입니다. 여기에는 2D 및 2D 효과에 대한 완전한 지원이 포함됩니다.

웹사이트 프로젝트에서 p5.js를 사용하는 한, 라이브러리는 깊이 있는 창의성을 위한 길을 열어줍니다. 예를 들어, 사용자가 상호 작용할 수 있는 연막, 애니메이션 나무 및 데이터 기반 랜딩 페이지와 같은 효과를 빠르게 부트스트랩할 수 있습니다.

모든 도면을 직접 해야 하지만 p5.js에 사용할 수 있는 리소스가 많기 때문에 시작하는 것이 그리 어렵지 않다는 것을 알게 될 것입니다. 그리고 두 프로젝트의 커뮤니티가 매우 관련되어 있다는 것은 말할 필요도 없습니다.

p5.js 예제 애니메이션

Pen P5.JS 비틀기 및 회전을 참조하십시오. CodePen의 Sdsmnc(@supastrocat) 작성.

p5.js 추가 리소스

• 처리 및 p5.js
• p5.js의 일몰과 별똥별

#6 – 모션

React는 너무 유명해서 자체 애니메이션 라이브러리가 있어야만 의미가 있습니다. Framer Motion은 React 개발자가 애니메이션 구성 요소를 구축하는 프로세스를 단순화할 수 있도록 하는 사전 빌드된 API와 함께 제공되지만 CSS 및 해당 독립 애니메이션 속성을 배워야 하는 몇 가지 장애물도 완화합니다. 그리고 작업하기가 매우 쉽습니다.

예시 스니펫:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

Framer의 애니메이션은 motion 및 animate 속성으로 정의됩니다. 이를 통해 전체 구성 요소와 해당 내부 요소를 선택한 다음 사용자 지정 애니메이션 논리로 보강할 수 있습니다. 리소스 섹션에 있는 Nefe Emadamerho-Atori의 Smashing 기사는 Framer Motion이 어떻게 작동하는지 보기 위한 훌륭한 출발점입니다.

모션 예제 애니메이션

CodePen에서 codebro(@codebro)의 Pen Laser Sight Button을 참조하십시오.

모션 추가 리소스

• 프레이머 모션 소개
• Framer Motion을 사용한 반응형 애니메이션

#7 – GSAP

나는 최근에 트위터에서 GSAP 아트가 공유되는 것을 꽤 많이 보았습니다. 그러나 그것은 놀라운 일이 아닙니다. 창의적인 프로젝트에서 볼 수 있는 많은 애니메이션과 동적 효과는 강력한 GSAP 엔진 덕분에 가능했습니다.

라이브러리는 성능에 최적화되어 있을 뿐만 아니라 선호하는 기술과도 매우 호환됩니다. 여기에는 React 및 Vue와 같은 프레임워크뿐만 아니라 모바일 및 오래된 웹 브라우저에 대한 추가 지원이 포함된 jQuery와 같은 라이브러리도 포함됩니다.

GSAP는 거의 모든 종류의 웹 요소(CSS에서 Canvas, DOM 개체에 이르기까지)를 쿼리하고 애니메이션할 수 있기 때문에 스피너 효과와 같은 간단한 작업에 사용하거나 모든 것을 동원하여 진정한 동적 웹사이트 경험을 구축할 수 있습니다.

Showcase 섹션에는 개발자가 작업한 수백 개의 예제 프로젝트가 있습니다. 두 가지 영감을 모두 확인하고 이 라이브러리로 무엇을 할 수 있는지 확인하십시오.

GSAP 예제 애니메이션

CodePen에서 Hyperplexed(@Hyperplexed)의 Pen Hulu Originals 소개를 참조하십시오.

GSAP 추가 리소스

• GSAP를 사용한 놀라운 애니메이션 기법
• 정교한 웹사이트 애니메이션 시퀀스 생성 – GSAP 3 Tutorial

#8 – Paper.js

Paper.js는 벡터 그래픽 애니메이션에 중점을 둔 애니메이션 라이브러리입니다. 이 접근 방식을 사용하면 정적 효과뿐만 아니라 대화형 동적 경험도 수행할 수 있습니다. 특히 Paper.js는 사용자가 개체를 끌어서 재정렬하고 사용자 정의 입력을 제공할 수 있는 애니메이션 프로젝트에서 인기가 있습니다.

개체는 레이어를 통해 분류할 수 있으며 각 레이어에는 사용자 지정 애니메이션 사양이 있습니다. 이것은 복잡한 구조에서 작업할 때 편리하여 사용자가 요청하지 않는 한 특정 레이어를 제거/비활성화할 수 있습니다.

Paper.js 예제 애니메이션

CodePen에서 Fiorald Ismaili(@Fiorald)의 Pen Filling Glasses – Paper.js를 참조하십시오.

Paper.js 추가 리소스

• Paper.js 벡터 지우기
• Paper.js의 파도

#9 – 웹 애니메이션

이 라이브러리는 Web Animation API의 직접 JavaScript 포트입니다. 라이브러리는 Element.animate() 사양과 직접 통합되므로 일반적으로 CSS 로직을 사용하여 작성된 애니메이션 기능을 사용할 수 있습니다. 저자들은 다음과 같이 설명했습니다.

"기본적으로 지원하지 않는 브라우저에서 Web Animation 기능을 제공하는 Web Animations API의 JavaScript 구현입니다. 폴리필은 사용 가능한 경우 기본 구현으로 폴백합니다."

웹 애니메이션 예제 애니메이션

CodePen에서 Sam Thorogood(@samthor)의 Pen Imperative Animations를 참조하십시오.

웹 애니메이션 추가 리소스

• 웹 애니메이션 API – 웹 API | MDN
• 웹 애니메이션 레벨 2 | W3C

#10 – 양성자

파티클 효과는 확실히 현대 웹 디자인 트렌드에 있습니다 . 디자이너는 배경 효과뿐만 아니라 흥미로운 전환, 심지어 창의적인 프로젝트를 위한 프레젠테이션을 위해 이를 구현합니다. Proton 라이브러리는 독창적인 입자 효과를 빠르게 확장해야 하는 요구 사항에 맞게 특별히 조정되었습니다.

스파크 효과 구축, 충돌 기반 상호 작용과 같은 작업을 수행할 수 있을 뿐만 아니라 텍스트를 새롭고 흥미로운 애니메이션 경험으로 변환할 수도 있습니다.

양성자 예제 애니메이션

CodePen에서 matsu7089(@matsu7089)의 Pen my-emitter를 참조하십시오.

양성자 추가 리소스

• 양성자 엔진 예
• 입자 배경에 대한 반응 구성 요소

요약

이러한 라이브러리 중 많은 부분이 좋은 점은 오랫동안 존재해 왔다는 것입니다. 따라서 예제를 찾기는 비교적 쉬울 뿐만 아니라 특정 컨텍스트에서 특정 라이브러리를 사용하는 방법에 대한 심층 가이드도 있습니다.

무엇보다도, 특히 실시간 데이터 또는 사용자 기반 입력을 구현하는 애니메이션 작업을 하려는 경우 달성하려는 목표가 무엇인지 아는 데 도움이 됩니다.

즉, 최고 라는 것은 없습니다. 도서관마다 장단점이 있습니다. 저에게는 GSAP가 상상할 수 있는 거의 모든 프론트엔드 프로젝트에서 사용하도록 최적화되어 있기 때문에 아마도 GSAP를 사용하겠습니다.

하지만 덜 야심찬 프로젝트를 하고 있다면 Popmotion과 같은 라이브러리로 충분합니다.