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

 

 

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

 

 

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

 

 

 

 

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

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

---

 

애니메이션을 위한 준비를 해보자

 

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;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.1) 2px,
      transparent 2px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.box-1 {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 2px solid red;
  background-color: blue;
}

 

애니메이션 적용 전

애니메이션 적용 전

 

위의 이미지에서 작은 눈금 하나의 크기는 20px이며, 상자는 테두리를 포함하여 50px인 정사각형 객체이다.

 

 

GSAP의 to

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

 

 

 

 

위의 예시는 초기 상태에서 지정된 상태로 동작하도록 해주는 to이다. to에서는 이처럼 초기 상태가 애니메이션을 적용하기 전의 상태가 되며, 애니메이션의 종료 상태가 애니메이션이 적용된 요소의 최종 상태가 된다.

 

 

GSAP의 from

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

 

 

 

 

위의 예시는 지정된 상태에서 초기의 상태로 돌아오는 동작을 해주는 from이다. to와 반대로 from은 지정된 속성들이 초기 상태가 되며, 최종적으로 애니메이션의 종료 상태가 애니메이션 적용 전의 상태가 된다.

 

 

GSAP의 fromTo

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

 

 

 

 

위의 예시는 지정된 초기 상태에서 지정한 최종 상태로 동작하도록 해주는 fromTo이다. 이는 to와 from의 성질을 함께 가지는 것으로, 요소의 초기 상태부터 종료 시까지의 동작을 모두 지정할 수 있다.

오늘은 애니메이션 구현을 위한 기본적인 개념을 알아보았다. 다음 포스팅에서는 이를 응용하여 문장에 애니메이션 기능을 추가해 보기로 하며, 이번 포스팅은 여기서 마친다.

 

 

---

◆ 함께 보면 좋은 글

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