[HTML/CSS/JS] GSAP로 애니메이션을 만들어 보자 : 문장 애니메이션 효과 만들기

 

 

이번 포스팅에서는 GSAP을 이용하여 문자열에 애니메이션 효과를 만들어 보자. 다음과 같은 애니메이션을 만들기 위한 GSAP의 사용법이 궁금하다면 아래의 포스팅을 참고하길 바란다.

 

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

 

 

 

 

 

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

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

---

 

애니메이션 기능을 구현하기 위한 준비를 해보자

 

HTML

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


<div class="sentence">
  <div class="sentence__text">
    <span><span>배</span></span>
    <span><span>고</span></span>
    <span><span>프</span></span>
    <span><span>다</span></span>
  </div>
</div>

 

CSS

body {
  margin:0;
}

.sentence {
  min-height: 100vh;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sentence__text {
  font-size: 0;
}

.sentence__text > * {
  font-size: 1rem;
}

.sentence__text > span {
  display: inline-block;
  overflow: hidden;   /* 영역을 벗어난 요소는 숨김 */
  padding: . 3rem 0;
  border: 5px solid red;
}

.sentence__text > span > span {
  font-size: 5rem;
  display: block;
}

 

애니메이션 적용 전

초기 상태

 

위의 준비 과정 중 HTML을 살펴보면, 각 글자에 span을 2번씩 적용한 것을 볼 수 있다. 이는 CSS를 통해 부모 span에 속성값으로 hidden을 줌으로써, 영역을 벗어나는 요소가 보이지 않게 만들기 위함이다.

 

 

from을 통해 애니메이션을 적용해 보자

var tl = gsap.timeline({
  repeat: -1,     // 무한 반복
  repeatDelay: 1  // 반복 딜레이
});

tl.from(".sentence__text > span > span", {
  duration: 1,	/* 1초 동안 */
  opacity: 0,	/* 투명한 상태에서 */
  y: 100,	/* 100만큼 아래에서 */
  stagger: 0.5	/* 글자마다 0.5초의 딜레이 */
});

 

from을 이용한 애니메이션이므로 우리가 지정한 속성들이 초기 상태가 되며, 애니메이션의 동작이 모두 완료되면 위의 이미지와 같이 초기 상태로 돌아오게 된다.

 

실행 결과

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

 

 

 

 

from에 대해 알고 싶다면 아래의 포스팅을 통해 학습하기 바란다.

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

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

---

 

다음으로 글자가 사라지는 애니메이션을 구현해 보자. 이때, 사라지게 만드는 애니메이션은, 다른 위치에서 초기의 상태로 돌아오게 만드는 from과 반대로 시작 상태가 초기의 상태여야 하므로 to를 적용해 주자.

 

to를 통해 애니메이션을 적용해 보자

var tl = gsap.timeline({
  repeat: -1,     // 무한 반복
  repeatDelay: 1  // 반복 딜레이
});

tl.to(
  ".sentence__text > span > span",
  {
    duration: 1,	/* 1초 동안 */
    opacity: 0,		/* 투명하게 */
    y: -100,		/* 위로 100만큼 */
    stagger: {
      each: 0.5,	/* 글자마다 0.5초의 딜레이 */
      from: "end"	/* 뒤에서부터 실행 */
    }
  },
  "+=2"
);

 

아래의 실행 결과를 통해 초기 상태에서 지정한 동작들에 의해 문자열이 사라지는 것을 확인할 수 있다. 여기서 stagger의 값으로 실수형 인자 1개만 주어진다면, 해당 인자는 each의 속성을 갖게 된다.

 

 ex) stagger: 0.5  =>  stagger: { each: 0.5 }

 

실행 결과

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

 

 

이번 포스팅에서는 문자열에 직접 애니메이션을 적용해 보았다. 해당 애니메이션 효과를 통해 우리가 원하는 대로 다양한 로고나 효과들을 다룰 수 있을 것 같다. 다음 포스팅에서 더욱 다양한 애니메이션을 다루어 보기로 하며, 이번 포스팅은 여기서 마친다.

 

 

---

◆ 함께 보면 좋은 글

• [HTML/CSS] 사이드바 메뉴 만들기 : 나타나는 2차 메뉴 만들기 feat. transform: translate
• [HTML/CSS] transform-origin & rotate를 사용하자 : 변신하는 아이콘 만들기 feat. position
• [HTML/CSS/JS] mouseenter와 mouseleave : 마우스 이벤트를 사용해 보자
• [HTML/CSS/JS] JQuery의 addClass와 removeClass : 엘리먼트에 클래스를 추가, 삭제해 보자