웹플로우에 GSAP 설치하기

안녕하세요 테크라소스입니다.

GSAP는 화려한 겉멋 부리기를 도와주는 자바스크립트 라이브러리입니다.

복잡한 구현은 싫지만 있어보이는건 좋아하는 분들이 공부하기 딱 좋은 라이브러리입니다.

GSAP는 개발에도 사용할 수 있지만, 웹플로우에도 사용할 수 있는데요, 어떻게 설치하는 지 알아보겠습니다.

웹플로우 GSAP 무료 플러그인 설치 방법

1. GSAP 공식 사이트 방문

먼저 GSAP 공식 사이트의 설치 페이지로 가주세요.

https://gsap.com/docs/v3/Installation

CDN → free를 선택하신 후 원하는 플러그인을 선택해주세요. 저는 ScrollTrigger를 선택했습니다.

선택하면 아래 코드가 나오는데, 복사해주세요.

2. 웹플로우 한 페이지에 설치하기

웹플로우 디자이너 화면 → Pages 탭 → 설치할 페이지의 Edit page settings 클릭

제일 하단 Befor </body> tag에 위 복사한 코드를 삽입하면 끝~

3. 웹사이트 전체에 설치하기

왼쪽 상단 메뉴 → Site Settings 클릭

Custom code → Fotter code에 삽입

이러면 모든 페이지에서 작동합니다.

웹플로우 GSAP 유료 플러그인 설치 방법

유료 플러그인을 무료로 설치하는 방법 아닙니다. 공짜를 좋아하면 머머리가 되기에 저는 유료 결제했습니다.

세상에는 돈으로 살 수 없는 것이 몇 개 있는데 그 중 하나가 모발입니다. 소중한 모발을 위해 결제해서 사용하세요.

1. 유료 플러그인 다운받기

GSAP 공식 사이트의 설치 페이지에 방문해주세요.

https://gsap.com/docs/v3/Installation

Get GSAP 버튼 클릭

(결제할 경우, 기존에 public이었던 다운로드 버튼이 유료 플러그인 다운 버튼으로 업그레이드 됩니다.)

다운 받은 후 minified에 들어가면 다양한 플러그인 파일이 들어있습니다.

설치할 플러그인 js파일을 선택한 후 확장자를 txt로 바꿔주세요.

만약 파일을 계속 보관할 거라면 원본은 남겨둔 후 txt로 바꿔주세요.

3. 웹플로우 설치하기

txt파일을 웹플로우 에셋 패널(단축키 J)에 업로드한 후 톱니바퀴 버튼을 눌러주세요.

클립 버튼 클릭

(해당 txt파일의 주소가 복사됩니다.)

4. 삽입하기

위에서 알려드린 페이지나 사이트 코드 삽입하는 곳에서, 아래 코드를 넣어주면 끝!

<script src=”복사한 주소 이 부분에 붙여넣기“> </script>

5. 되는지 확인하기

이름만 봐도 스크롤을 부드럽게 해줄 것만 같은 ScrollSmoother 플러그인이 잘 작동하나 확인해보겠습니다.

간단한 예제 코드를 붙여넣어봤습니다.

<script>
ScrollSmoother.create({
wrapper: “.smoother-wrapper” ,
content: “.smoother-content: ,
smooth: 3,
smoothTouch: 0.1
})
</script>

참고로 위 코드가 작동하려면 작동시키려는 콘텐츠의 클래스를 smoother-content로 지정, 그 콘텐츠의 컨테이너는 smoother-wrapper로 지정해야합니다. (정확하지 않을 수도.. 잘 모름ㅋ)

참고로 미리보기 화면에서는 script가 작동이 안되고요, Publishing 한 사이트에서만 볼 수 있습니다.

부드럽게 스크롤되네요.

녹화가 좀 이상하게 됐지만 실제로는 더 부드럽습니다.

노코딩 툴인척 하는 예스코딩툴 웹플로우에서 GSAP를 설치하는 방법에 대해 알아봤습니다.

웹플로우나 GSAP나 한국 자료가 많이 없어서 열심히 수입 중입니다.

도움 되셨길 바랍니다!

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다