GSAP 요소 Targeting 문법

개요

애니메이션을 사용하기 전에, 어떤 요소를 애니메이션을 적용할 것인지 아는 것인지 알아야된다. 이 블로그에서는 gsap문법에서 요소를 targeting하는 방법들에 대해서 알아보자.

HTML에서 class는 스타일 속성으로 사용한다. 이 클래스 이름을 gsap에서 애니메이션요소로 선택할 때 사용되는데 문법은 다음과 같다.

box라는 클래스 이름을 가진 Element를 선택하고 싶다면

JavaScript

<div class='box'></div>

gsap 메서드의 첫 번째 인자로 점(.) 을 붙여서 따옴표로 감싸주면된다.

JavaScript

gsap.to(".box", {...});

다른 방법으로는 HTML 속성의 id속성으로 요소를 선택할 수 있다. 클래스명으로 선택하는 것과는 다르게, ID로 사용하려면 각 페이지에서 한 번만 사용할 수 있다는 것을 기억하자. 그리고 ID는 단어앞에 #을 붙여서 사용한다.

id가 hero라는 element를 선택하고 싶다면

JavaScript

<div id="hero"></div>

메소드 첫 번째 인자로 단어 앞에 #을 붙여서 따옴표로 감싸면 된다.

JavaScript

gsap.to("#hero", {...});

페이지에서 button 요소를 다같이 선택하고 싶을 때도 있을 수 있다. 그 때는 태그이름을 그대로 사용하면 되는데, gsap 메소드에서는 점(.)이나 #접두어를 사용하지 않고 그냥 tag이름만 사용하면된다.

여러가지 요소이지만 같은 태그를 가진 요소가 있다면

JavaScript

<button>첫 번째 버튼</button>
<button>두 번째 버튼</button>

접두어를 사용하지 않고 그대로 단어이름 사용하면 된다.

JavaScript

gsap.to("button", {...});

가끔씩은 다른 타입들을 동시에 애니메이션을 적용하고 싶을 수도 있다. 이 때는 콤마(,)를 사용해서 추가하면 된다. 주의할 점은 배열처럼 대괄호를 사용하는 것이 아니다.

이렇게 다른 요소를 한 번에 선택하고 싶을 때는

JavaScript

<div class="box"></div>
<div class="circle"></div>

쌍따옴표 내부에서 각 선택자와 중간에 쉼표를 넣어준다.

JavaScript

gsap.to(".box, .circle", {...});

간혹 중첩된 자식요소를 선택하고 싶을 수도 있다. 이 때는 CSS처럼 부모요소와 자식요소를 나열하되 콤마(,)를 사용하지 않으면 된다.

카드 요소 내부의 img태그를 선택을하고 싶다면

JavaScript

<div class="card">
  <img />
  <div class="info">text</div>
</div>

콤마를 사용하지 않고 space를 둬서 나열하면 된다.

JavaScript

gsap.to(".card img", {...});

물론 info클래스 요소를 선택하고 싶다면, 클래스 선택자를 사용하되, 콤마를 사용하지 않고 나열한다.

JavaScript

gsap.to(".card .info", {...});