gsap 시작 전,
greensock 에서
ScrollTrigger.js나 ScrollTrigger.min.js 다운로드하여
html에 링크 걸어주기.
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
</body>gsap
gsap.to
움직임의 끝나는 점을 지정하는 애니메이션
gsap.from
움직임의 시작점을 지정하는 애니메이션
gsap.fromTo
시작 점과 끝나는 점을 지정하는 애니메이션
stagger
시간 간격을 두고 실행하는 애니메이션
set
애니메이션 효과 없이 즉시 변경
scrollTriger
스크롤할 때 효과 작동.
trigger
기준 잡는 속성
start : 0 0;
시작지점 : 기준에서, 윈도우에서 둘이 만나면 실행
end : 0 0;
시작지점 : 기준에서, 윈도우에서 둘이 만나면 실행 (scrub이 아니라면 크게 의미가 없을 수 있음)
markers : true / false;
표시자
scrub
부드러운 스크러빙
뭉대는 효과(왔다리 갔다리)
scrub : 1은 스크롤바를 잡는데 1초가 걸림을 의미.
timeline
타임라인은 말그대로 시간 순서대로 효과 작동.
addLabel 같은 시작지점을 줄 때 동일하게 실행.
참고로, gsap사용했을 때 trasition을 별도로 주면 안됨.
gsap안에 포함되어있기 때문.
온전히 나를 위한 코딩 기록 공간