gsap의 막강한 기능은 각 엘리먼트의 애니메이션 효과와 스크롤 트리거(scrollTrigger) 로 스크롤 무브시 시차효과(parallax)를 줄수 있는 플러그인이다.
물론 그것말고도 다양한기능들 ( svg 그리기, svg motion path, spliteText 등 )도 있다. 이건 나중에 살펴보자.
원래 엄청 예전에 나왔지만, 익스에서 호환이 안되다 보니 실무에 쓸수가 없었다.그러나 이제 IE 익스가 2022년 6월 15일 마지막으로 사라진다고 하니, 미리 미리 알아놓자
이제 실무에서 진짜 써먹을 수 있어 너무 좋음.
Gsap은 자바스크립트 기반이며, 문법은 ES6 문법(최신기술)이다.
고로 gsap을 하려면 자바스크립트로 작성해야 한다.
to와 from, fromTo 가 있다. 이거 3개로 정리 끝남.
to 는 원래 값에서 다른값으로 이동할때 그 중간에 변화하는 것을 애니메이션 화해서 보여준다.
from은 지정한 다름값에서 원래 값으로 변화하는 것을 애니메이션 화 해서 보여준다.
fromTo 는 from 에서 to 로 지정된 애니메이션으로 변화하는것이다.
기본문법 정리
애니메이션 기본문법은 아래와 같다.
gsap.to('엘리먼트', {
'style속성명1' : 'style값',
'style속성명2' : 'style값',
'style속성명3' : 'style값',
})
위 '엘리먼트'를 지칭하는 방법은 여러가지 중 아래 방법이 많이 쓰인다.
<div id="abc"></div> ----> gsap.to('#abc',{
<div class="abc"></div> ----> gsap.to('.abc',{
위와 같이 아이디는 '#' 붙이고, 클래스는 '.' 붙이면 끝이다. (클래스 같은 경우 여러개가 있다면 가장 첫번째것만 적용된다)
style속성명1 은 예를 들어, width 라고 style의 가로 크기 속성명을 적으면되고,
style값은 100 이라고 하면 100px 이라는 뜻이다. 기본 숫자만 적으면 "px" 단위임,
그리고 스타일에서 예를 들어, translateX(100px) 이렇게 하면 원래 위치에서 옆으로 100px 이동되어 표현되어 진다.
transform에 translate는 위치이동 애니메이션의 핵심요소이기 때문에 자주 쓰여서,
translateX(100px) 은 x: 100 와 같다.
translateY(100px) => y:100 와 같다.
translateX(50%) => x: '50%' 와 같다. (옆에 홀따옴표는 숫자와 문자의 조합이라면 홀따옴표(쌍따옴표도됨)를 붙혀서 무조건 입력해야 한다. 아니면 오류남. )
opacity도 된다. => opacity: 0.5
자주쓰이는 것들은 아래 테이블에서 확인해보자.
| GSAP | CSS | 설명 |
| x:'100%', y: '100%' | transform: translate(100%, 100%) | x, y 축 위치 조정 100 : 100px (px 생략가능) 100% , -100%, window.innnerWidth |
| x: 100 | transform: translateX(100px) | x축 위치조정 100 : 100px (px 생략가능) 100% , -100%, window.innerHeight |
| y: 100 | transform: translateY(100px) |
y축 위치조정 100 : 100px (px 생략가능) 100% , -100%, window.innerHeight |
| rotation: 360 | transform: rotate(360deg) | roation: 360도 원방향으로 돌리기 |
| rotationX: 360 | transform: rotateX(360deg) | x축 기준으로 360도 돌리기 |
| rotationY: 360 | transform: rotateY(360deg) | y축 기준으로 360도 돌리기 |
| skewX: 45 | transform: skewX(45deg) | x축 비틀기, 즉 x를 비틈으로, y축이 회전함. 양수는 시계반대방향으로 회전 음수는 시계방향으로 회전 |
| skewY: 45 | transform: skewY(45deg) | y축 비틀기, 즉 y를 비틈으로, x축이 회전함. 양수는 시계반대방향으로 회전 음수는 시계방향으로 회전 |
| scale: 2 | transform: scale(2, 2) | 확대하기 |
| scaleX: 2 | transform: scaleX(2) | 아니 확대도 x,y축이 나뉘어져있네? |
| scaleY: 2 | transform: scaleY(2) | y축임 |
| xPercent: -50 | transform: translateX(-50%) | 위치값 이동 퍼센티지로 가능한듯 |
| yPercent: -50 | transform: translateY(-50%) | 위치값 이동 퍼센티지로 가능한듯 |
- 2d, 3d 모션에 대해 눈으로 보고, css 추출해주는 사이트
https://css-transform.moro.es/
- 샘플 이미지 불러오기
<img src="https://source.unsplash.com/random/250x250">.
위에 250 x 250 가로 세로 크기 바꿔서 입력하면 불러와짐
- javascript Style 속성명
https://www.w3schools.com/jsref/dom_obj_style.asp
gsap에 쓰이는 style속성명은 css속성명과 약간 다르다. javascript 전용 dom style명이 따로 있는데 위링크에서 확인해서 써먹자.
이제 코딩 시작해보자
일단 script를 가져와야 한다.
아래주소에서 cdn 클릭하면 주소 복사됨.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<link rel="stylesheet" href="https://kbbtv.co.kr/css/base.css" type="text/css" />
<style>
*, :after, :before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html {overflow-y:scroll;height:100%;font-size:10px;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none}
body {
margin:0;padding:0;
}
</style>
<script>
gsap.registerPlugin(ScrollTrigger); // scrollTrigger를 사용한다 선언
</script>
(위 css는 예제를 위한 눈금자 css)
일단 gsap 코어파일인 gsap.min.js 가져오고, 스크롤 트리거(ScrollTrigger.min.js) 파일 가져와야 함.