Skip to content

웹 애니메이션 라이브러리 치트 시트

JavaScript 애니메이션 라이브러리

GSAP

업계를 선도하는 고성능 애니메이션 라이브러리로, CSS 속성, SVG, Canvas 등을 지원하며 React, Vue와 같은 프레임워크와 원활하게 통합됩니다.

  • 특징: 고성능, 사용 편의성, 강력한 기능, 타임라인 지원

  • 설치: npm install gsap

  • 사용법:

    import { gsap } from "gsap";

gsap.to(".box", { duration: 2, x: 100 });

Anime.js

가벼운 JavaScript 애니메이션 라이브러리로, CSS 속성, SVG, DOM 속성 및 JavaScript 객체 애니메이션을 지원합니다.

  • 특징: 심플한 사용법, 가벼움, 다양한 애니메이션 타입 지원

  • 설치: npm install animejs

  • 사용법:

    import anime from 'animejs/lib/anime.es.js';

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000
});

Velocity.js

jQuery의 사용 편의성과 CSS의 고성능을 결합한 애니메이션 라이브러리로, 애니메이션 큐와 컨텍스트 요소를 지원합니다.

  • 특징: 애니메이션 큐, 컨텍스트 요소, 사용 편의성

  • 설치: npm install velocity-animate

  • 사용법:

    import velocity from 'velocity-animate';

velocity(document.querySelector(".box"), { translateX: 250 }, { duration: 2000 });

CSS 애니메이션 라이브러리

Animate.css

풍부한 애니메이션 효과를 갖춘 CSS 애니메이션 라이브러리로, 클래스 이름을 추가하는 것만으로 애니메이션을 구현할 수 있습니다.

  • 특징: 풍부한 애니메이션 효과, 심플한 사용법, 우수한 호환성

  • 설치: npm install animate.css --save

  • 사용법:

    <link rel="stylesheet" href="animate.css">
<div class="animated bounce">Hello World!</div>

Hover.css

CSS3만으로 구현된 버튼 호버 효과 라이브러리로, 다양한 호버 효과를 포함하고 있습니다.

  • 특징: 다양한 효과, CSS3 전용 구현, 사용 편의성

  • 설치: npm install hover.css

  • 사용법:

    <link rel="stylesheet" href="hover.css">
<a class="hvr-grow">Grow</a>

CSShake

흔들기, 요동치기 등의 효과를 만들기 위한 CSS3 애니메이션 클래스 세트입니다.

  • 특징: 독특한 애니메이션 효과, CSS3 전용 구현, 사용 편의성

  • 설치: npm install csshake

  • 사용법:

    <link rel="stylesheet" href="csshake.css">
<div class="shake-little">Shake it!</div>