[HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 feat. timeline

 

 

이번 포스팅에서는 GSAP의 사용법에 대해 알아보는 시간을 가져보도록 하자. GSAP는 보다 다양하고 복잡한 애니메이션을 구현하기 위한 도구로써, 보다 자유로운 애니메이션을 제공할 수 있도록 도움을 준다.

 

 

See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen.

 

 

 

 

GSAP를 불러와 보자

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

---

 

 

이번 포스팅에서는 가장 기본이 되는 gsap.min.js를 사용해 보도록 하자.

 

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js"></script>

<div class="box-1"></div>

 

CSS

body {
  margin: 0;
  background-color: black;
}

.box-1 {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 20px;
}

 

 

GSAP 적용 전

평범한 상자

 

 

GSAP 객체를 생성해 보자

/* 모든 애니메이션은 시간순으로 작동 */
const tl = gsap.timeline({
  repeat: -1,     // 무한 반복
  repeatDelay: 1  // 반복 딜레이
});

 

위의 코드는 gsap에서 timeline을 가진 t1 객체를 생성하는 과정이다. 이때,  timeline의 호출 과정에서 여러 속성값을 지정하는 것으로 다양한 애니메이션 베이스를 지정할 수 있다. 위에서는 애니메이션의 반복 실행 횟수를 정하는 repeat 속성과 애니메이션 반복 과정 사이의 딜레이를 지정하는 repeatDelay 속성을 지정해 보았다.

 

 

애니메이션 효과 생성

/* 
  duration: n -> n초 동안 수행
  x: n        -> n만큼 x축 이동
  rotation: n -> n만큼 회전
  backgroundColor: "color" -> 바탕색을 color로 지정
*/
tl.to(".box-1", { duration: 1, x: 100 })  			// 오른쪽으로 100만큼 이동
  .to(".box-1", { duration: 1, backgroundColor: "white" }) 	// 흰색으로 변경
  .to(".box-1", { duration: 1, x: 0, rotation: -180 }, "+=1") 	// 실행 시간대에서 1초 후에 실행
  .to(".box-1", { duration: 2, x: 200})				// 2초 동안 실행
  .to(".box-1", { duration: 2, rotation:360}, "-=2")  		// 실행 시간대에서 2초 전에 실행
  .to(".box-1", { duration: 1, backgroundColor:"blue", x:0});

 

생성된 객체를 통해 애니메이션 효과를 생성할 수 있다. 여기서 해당 객체가 timeline이라는 것을 항상 인지해야 원하는 애니메이션을 생성할 수 있다. 시간 순서대로 작동하는 t1 객체는 일반적으로 이전에 지정된 애니메이션 동작이 종료되어야 다음 애니메이션을 수행한다는 것이다. 아래의 예시를 보자.

 

ex)

(".box-1", { duration: 1, x: 100 })    // 1초 동안 x축으로 100만큼 이동

위의 동작이 모두 완료된 후, 아래 동작을 실행

(".box-1", { duration: 1, backgroundColor: "white" })    // 1초 동안 색을 하얀색으로 변경
-------------------------------------------------------------------------------------------------------------------
∴ 총 2초 동안 애니메이션이 동작

---

See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen.

 

 

 

그렇다면 한 시간대에 하나의 애니메이션만 동작할 수 있는 걸까? 물론 여러 속성을 한 번에 적용하여 복수의 애니메이션이 동시에 일어나도록 만들 수는 있지만, 이는 duration을 공유한다는 점이 존재하며, 자유로운 동작을 구현하는 과정에서 코드의 확장성 또한 보장하기 어렵다.

다행히도 실행 시간대에서 벗어날 수 있는 방법이 있다. 아래의 예시를 보자.

 

ex)

(".box-1", { duration: 1, x: 100 })                                   // 1초 동안 x축으로 100만큼 이동
(".box-1", { duration: 1, backgroundColor: "white" })    // 1초 동안 색을 하얀색으로 변경
(".box-1", { duration: 2, rotation:360}, "-=2")                // 동작 시간대에서 2초 전에 동작 (2초 동안 360도 회전)
------------------------------------------------------------------------------------------------------------------------------------------------
∴ 총 2초 동안 애니메이션이 동작

---

See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen.

 

 

원래의 순서대로라면 실행 2초 후, 회전은 마지막에 따로 동작하여 총 4초의 동작 시간이 필요했다. 여기서 "-=2"를 통해 원래의 동작 시간대보다 2초 전에 동작하는 것으로 앞의 2초 동안의 동작과 함께 수행되는 것을 볼 수 있었다.

다음 포스팅에서는 GSAP를 통해 fromTo 애니메이션 동작을 알아보도록 하고, 이번 포스팅은 여기서 마친다.

 

 

[HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 다양한 애니메이션 기능을 구현해 보자 feat. to, from과 fromTo

[HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 다양한 애니메이션 기능을 구현해 보자 feat. to, from과

---

◆ 함께 보면 좋은 글

• [HTML/CSS/JS] mouseenter와 mouseleave : 마우스 이벤트를 사용해 보자
• [HTML/CSS/JS] JQuery의 addClass와 removeClass : 엘리먼트에 클래스를 추가, 삭제해 보자
• [HTML/CSS] 사이드바 메뉴 만들기 : 늘어나는 2차 메뉴 만들기 feat. overflow: hidden
• [HTML/CSS] 드롭다운 메뉴 바 만들기 : 2차 메뉴 만들기 feat. position