개요
애니메이션을 사용하기 전에, 어떤 요소를 애니메이션을 적용할 것인지 아는 것인지 알아야된다. 이 블로그에서는 gsap문법에서 요소를 targeting하는 방법들에 대해서 알아보자.
클래스 이름으로 타겟팅하기
HTML에서 class는 스타일 속성으로 사용한다. 이 클래스 이름을 gsap에서 애니메이션요소로 선택할 때 사용되는데 문법은 다음과 같다.
예제
box라는 클래스 이름을 가진 Element를 선택하고 싶다면
JavaScript
<div class='box'></div>gsap 메서드의 첫 번째 인자로
점(.) 을 붙여서 따옴표로 감싸주면된다.JavaScript
gsap.to(".box", {...});ID로 타겟팅하기
다른 방법으로는 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", {...});