by
Jan 07. 2024
GSAP 적용을 위한 워드프레스 플러그인
워드프레스 사이트에 GSAP 애니메이션 적용하기
지난번 gsap를 한 번 소개하는 글을 작성해 봤었는데, 혹 적용 방법이 어려워 보여 아직 시도를 못 해 보셨다면, 간단한 플러그인을 설치해서 사이트에 애니메이션을 적용하는 방법을 이용해 보세요.
> 지난 글 참고
https://brunch.co.kr/@oksambari/105
gsap가 왜 좋은지는 구글 검색을 해 보면 다양한 가이드나 소개 내용들이 있으니 한 번 시간이 되시면 확인해 보시는 것도 좋을 거 같습니다. 제 글 중에서 한 번 비교를 해 보면 텍스트 교체 효과를 css로 표시하는 방법을 한 번 소개한 적이 있습니다. > https://brunch.co.kr/@oksambari/107
애니메이션을 위한 키프레임을 정의한 다음, 필요한 요소에 만든 애니메이션을 동작하게 적어주면 되었습니다. 그런데 뭔가 동작을 일일이 계산해서 정의하고, 그걸 특정 요소에 적용하고 하는 과정이 다소 번거로운 느낌이 들지요. 이러한 css의 transition 효과들을 매우 간편하게 적용할 수 있게 javascript로 라이브러리 형태로 만들어 놓은 게 GSAP입니다.
그러면 이 좋은 걸 내 워드프레스 사이트에는 어떻게 적용을 할 것인가가 먼저 해결이 되어야겠지요. 자식 테마를 설치해서 사이트를 구축한 경우라면, 자식 테마를 이용해서 gsap와 관련된 스크립트 파일을 연결하고, 동작을 위한 코드를 적는 게 가능합니다. > https://gsap.com/resources/Wordpress#installation
만약 자식 테마를 설치하지 않고 사이트를 구축했고, 따로 php 코드를 적는 방법이 현재 없다 하는 경우 플러그인 형태로도 제작해서 사이트에 적용을 할 수 있는 방법이 존재합니다. 아주 간단한 필요 내용만 적어서 만들어 봤습니다. 필요하신 분은 한 번 다운로드하여서 설치해 보세요.
> gsap-for-wordPress.php
플러그인 설치 후 활성화가 됐다면, 사이트에 gsap 코어 js 파일과, scrollTrigger 파일이 링크돼 있는 걸 볼 수 있습니다.
플러그인에 작성된 코드의 역할은 이렇습니다. wp_enqueue_scripts 훅을 이용해서 gsp 코어와 자주 쓰이는 scrollTrigger라는 플러그인 파일을 링크시켰습니다. 그리고 wp_footer 훅을 이용해서 전체 사이트의 html 구조에서 푸터쪽에(body태그 끝나기 전) script가 적히도록 했습니다.
일단 gsap 활용에서 가장 많이 쓰이는 코어와, scrollTrigger만 일단 연결이 돼 있고, 필요하시면 같은 방법으로 플러그인을 추가하면 됩니다. 추가할 수 있는 플러그인들은 이렇게 많습니다. > https://gsap.com/docs/v3/Installation
예시로는 화면이 스크롤될 때 등장 효과를 주고 싶은 요소가 있다면 'gs_reveal'을 적으면 화면이 스크롤될 때 스르륵 움직이면서 fade in이 되는 효과를 줄 수 있는 코드가 추가돼 있습니다. (※ 왼쪽에서 등장시키고자 할 때 : gs_reveal gs_reveal_fromLeft / 오른쪽에서 등장시키고자 할 때 : gs_reveal gs_reveal_fromRight / 스크롤 방향에 따라 아래 또는 위에서 등장 : gs_reveal)
작동 예 : http://oks-together.hol.es/wpcomponent/gsap/
저는 이런 코드를 한 번 추가해 봤는데요, 간단한 정의로 로고가 계속 커졌다 작아졌다 하는 동작을 하게 됩니다. 기본 문법은 여기에 잘 정리가 돼있으니 기본적인 것부터 한 번 활용을 해 보면 좋습니다. > https://gsap.com/community/cheatsheet/
추가로 몇 가지 팁을 알려 드리면 이렇습니다.
1. 애니메이션을 적용하기 앞서 우선 원래 있어야 할 요소들의 위치에 잘 갖다 놓는 작업이 필요합니다.
디자인대로 우선 퍼블리싱이 되어야 하는 것이겠지요. 애니메이션 적용 전 디자인대로 화면을 구성한 다음, 원하는 효과를 추가로 적용하면 될 거 같습니다. 화면에 일단 놓인 요소는 그 상태를 기준으로 상하좌우, 회전, 확대 등 다양하게 원하는 변형을 줄 수 있습니다. 페이지 빌더가 있는 사이트라면 화면 구성이 더 쉬워지겠죠.
2. 요소를 선택하는 방법 알기
하나의 요소에 동작을 더하느냐, 같은 클래스를 가진 여러 요소들에 동작을 더하느냐에 따라 약간의 차이가 있습니다. 모든 요소 각각에 동작을 줄 때에는 반복문을 써서 적용합니다.
선택자에는 css로 선택하는 방법 그대로를 쓸 수도 있고, jQuery 문법 사용도 가능합니다. 또는 gsap에서 제공하는 utils.toArray()라는 매서드로 반복문을 위한 모습으로 선택해 놓을 수도 있습니다.
3. 마커를 표시하면 언제 동작되는지 좀 더 쉽게 이해가 됩니다.
주석 처리된 부분에서 //를 지우면 마커들이 화면에 표시됩니다. 기본은 요소의 높이 만큼이 트리거 높이가 되고, 화면의 맨 위, 아래가 동작 발생 시점입니다. (요소 맨 위가 화면 아래를 통과할 때 시작, 요소 맨 아래가 화면 맨 위를 통과할 때 끝)
