brunch

매거진 IMPREZA 테마 활용

라이킷 9 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Jan 13. 2023

#13. 워드프레스에 GSAP 애니메이션 추가하기

[GSAP + Impreza]로 애니메이션 구현하기

먼저, 웹사이트 화면 요소에 동작을 추가하려면 css의 Transition, Transform을 사용할 수 있습니다. 반복적인 동작을 구현하고자 할 때에는 Animation을 사용할 수 있고요. 이전에 '상점 사이트 따라 만들기'를 했을 때 이 방법이 자주 등장했습니다. (> https://brunch.co.kr/@oksambari/55 )

- css 애니메이션 관련 참고글 :

https://thoughtbot.com/blog/transitions-and-transforms

https://thoughtbot.com/blog/css-animation-for-beginners

제가 생각하는 css 애니메이션을 한 번 요약해 보면, css에는 화면 요소에 마우스를 올렸을 때, 이 상태를 체크하는 ':hover'라는 선택자가 있어서 처음 상태, 나중 상태를 정의해 놓으면 화면에 동작을 구현할 수 있습니다. 만약 여기에 클릭하는 행위나 기타 이벤트에 연결되어 동작을 하도록 하려면 js 스크립트를 더하여 css 클래스를 요소에 추가하거나 빼서 제어를 할 수도 있습니다.

.classname <-> .classname:hover
또는
.classname <-> .classname.active

헌데 매번 구현을 하려면 뭔가 정의할 거도 많고, 서로 맞물려서 작동을 시키자니 조치할 게 많았던 것 같습니다. 시간이 꽤 소요가 되기도 하고요.

이런 부분을 좀 간단하게 해결할 수 있는 방법은 없는 것일까?

네 있더라고요. 세상엔 참 능력자들이 많습니다.

GSAP

위치 이동, 동작, 거기에 css Transform으로는 할 수 없는 멋진 기능까지 더할 수 있는데 매우 직관적이기까지 한 방법이 있었습니다. 바로 이번에 소개할 GSAP라는 javascript 라이브러리 활용입니다. (javascript를 기반으로 사용자들이 더 쉬운 문법으로 쓸 수 있게 개발해 놓은 코드들의 집합)

문법은 심플하고, css의 속성들과도 사용되는 게 거의 비슷합니다. 코드 몇 줄로 무한 반복하는 동작을 뚝딱 만들어 내네요. 앞으로 해야 할 건 사전에 정확한 위치에만 요소를 놓기만 하면 되고, 모든 동작은 GSAP를 이용하면 되겠습니다. > 예: http://oks-themes.hol.es/

사용법은 GSAP 홈페이지나 강의 사이트에 너무 자세히 잘 나온 것 같아, 여기서는 기본적으로 알고 시작하면 좋은 부분만 한 번 요약을 해 봅니다.

1. TWEEN

요소에 작동하는 각각의 애니메이션 동작 하나하나를 GSAP에서는 TWEEN이라고 합니다. 어떤 요소를 화면에서 동작시키려면 대표적으로 세 가지 경우가 있겠습니다.

gsap.to() - 어디로 보낼까

gsap.from() - 어디서 처음 위치로 오게 할까

gsap.fromTo() - 아예 시작하는 곳과 끝을 모두 지정하자

타깃 / 속성

() 안에는 타깃과 속성(properties)을 넣어서 이동할 때의 모습을 자세히 제어합니다.

타깃은 css의 선택자를 그대로 쓸 수 있고, 여러 요소를 선택해서 같이 동작시킬 수도 있습니다.

> ".class" 이 클래스를 가진 요소에 tween 애니메이션을 작동시켜라

자주 쓰이는 속성들에는 아래와 같은 것이 있습니다.

얼마나 걸릴지, 잠시 멈췄다 동작할지, 반복시킬지, 완료가 된 다음 동작이 있는지 등을 결정할 수 있습니다.

여기서 stagger라는 속성은 같은 클래스를 가진 여러 요소들을 하나의 tween으로 제어할 수 있게 해 줍니다. 예를 들어 화면에 5개의 아이콘이 있는데, 0.5초의 간격을 두고 같은 동작을 하도록 할 때 매우 편리합니다.

아이콘 하나하나에 tween을 동작시킬 필요 없이 한 부모 아래 같은 클래스를 가진 한 묶음으로 제어할 수 있습니다.

> 예: http://oks-themes.hol.es/getting-started/comprehensive-example/

동작 제어

버튼이나 다른 이벤트를 이용해서 tween을 제어할 수도 있습니다.

play, pause, resume, reverse, restart 등

예를 들어 화면을 스크롤해 내려갈 때와 올라올 때 동작의 방향을 마음대로 바꿔서 표시할 수 있게 됩니다. 방문자가 버튼으로 제어할 수 있게 할 수도 있고요.

2. TIMELINE

트윈 하나하나를 적고, 작동 및 지연 시간을 잘 설정하면 순차적으로 애니메이션을 동작시킬 수 있습니다. 그런데 이걸 전체 타임라인으로 묶어서 앞의 동작이 완료가 된 후 다음 동작이 나오게 되면 더 쉽고 정확히 컨트롤이 가능합니다. Tween들을 순차적으로 묶어서 관리하기 위해 Timeline을 씁니다.

예제로 왼쪽의 텍스트와 버튼이 다 등장 후, 오른쪽의 아이콘들이 등장하도록 할 때, 하나의 타임라인 아래 순차적으로 등장할 각 요소들의 tween들을 연결하면 간편합니다. 그러면 모든 tween은 앞의 것의 완료를 기다린 다음 진행됩니다.

타임라인 구성 시 앞의 것과 동일한 시점 또는 비교하여 조금 미리 tween을 작동할 때도 있을 겁니다. 이럴 땐 'position parameter'를 이용해서 제어가 가능합니다.

예 :

"<" - 앞에 것과 동시에 시작

"-=1" - 앞에 것 끝나기 1초 전 시작

"+=1" - 앞에 것 끝나고 1초 기다렸다가 시작

3. ScrollTrigger

위 1,2번의 동작들은 화면에 바로 보이는 요소에는 의도대로 동작을 표시할 수 있습니다. 그런데, 화면을 조금 스크롤해 내려가야 보이는 요소는 동작이 이미 끝나 있겠지요. 스크롤해서 tween이 동작할 요소가 화면에 나올 때를 체크할 수 있는 방법을 추가하려면 GSAP에 추가 플러그인 형태의 ScrollTrigger를 이용합니다.

https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger

기본 코어 GSAP 라이브러리에 ScrollerTrigger를 추가하면, 이제 tween 속성에 'scrollTrigger'를 쓸 수 있게 됩니다.

코드에 'markers:true'를 적어주면 작업 시 언제 제어가 되는지 확인이 쉽고, 요소의 높이 맨 위가 start로 지정한 'top 75%(화면 맨 위에서 75% 지점)' 위치를 통과할 때, 캐릭터를 오른쪽으로 굴리는 동작이 시작되게 할 수 있습니다. scrollTrigger 내에 쓸 수 있는 속성 중 toggleActions로 역으로 화면을 다시 올라갈 때에는 'reverse' 동작으로 반대로 굴러가는 모습을 간단히 구현할 수도 있습니다.

> 예: http://oks-themes.hol.es/scrolltrigger/

이 외 자세한 소개는 아래에 소개드리는 링크를 보면 영상도 있고, 예제 코드도 있고, 순서대로 알아야 할 게 정리 돼 있어서 전체적인 개념 및 사용법을 확인할 수 있습니다.

https://greensock.com/get-started/

https://www.creativecodingclub.com/courses/scrolltrigger-express

그러면 이 좋은 걸 Impreza 테마에는 어떻게 연결해 쓸 수 있을까요?

GSAP 홈페이지 블로그 글에도 잘 소개가 돼 있습니다. 물론 Impreza 외 어느 테마에도 같은 방법으로 연결해서 사용 가능합니다.

https://greensock.com/wordpress/

추가로 설명을 덧붙이면, 워드프레스는 css, js 파일을 프런트 앤드에 연결하는 방법으로 'wp_enqueue_scripts'라는 훅을 제공합니다. 그다음 연결을 할 파일들은 'wp_enqueue_script', 'wp_enqueue_style'로 추가할 수 있고요.

이때 모든 페이지에 다 연결할 게 아니라면, 'wp_register_script / wp_register_style'로 미리 정의해 놓고, 필요한 페이지에만 연결해서 쓸 수도 있습니다. 현재 열린 페이지가 무엇인가를 워드프레스에서는 'Conditional Tags'로 쉽게 체크 가능합니다.

https://codex.wordpress.org/Conditional_Tags