안녕하세요 테크라소스입니다.
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나 한국 자료가 많이 없어서 열심히 수입 중입니다.
도움 되셨길 바랍니다!