1. 유튜브 링크
유튜브 무료강의
https://www.youtube.com/watch?v=xn6rwG-DinA&t=3s
[★] 플러그인
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2. 용어 정의 - 토글액션 (toggleActions)
더보기
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box2", {
scrollTrigger: {
trigger: ".box2",
// toggleActions: "none none restart reverse"
},
x: 400, duration: 2,
})
ScrollTrigger.create({
onEnter: ONENTER,
onLeave: ONLEAVE,
onEnterBack: ONENTERBACK,
onLeaveBack: ONLEAVEBACK
});
BODY = document.querySelector('body')
function ONENTER() {
$('.fix').text('onEnter');
}
function ONLEAVE() {
$('.fix').text('onLeave');
}
function ONENTERBACK() {
$('.fix').text('onEnterBack');
}
function ONLEAVEBACK() {
$('.fix').text('onLeaveBack');
}
</script>
3. 용어 정의 - Scrub (되감기)
- scrub은 '문질러 닦다' 라는 의미인데 크게 와닿지 않고 되감기가 더 적절하지 않을까 싶다.
- scrub: true 를 입력해도 되고 true 대신 수치를 입력하는 것이 더 부드럽다.
더보기
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box1", {
scrollTrigger: {
trigger: ".box1",
markers: true,
start: "top center",
scrub: 3,
},
x: 400, duration: 4,
});
4. 용어 정의 - Pinning (화면 고정)
- pinning도 Scrub만큼 자주 쓰이는 기능으로 핀으로 화면에 고정하면 기능이라고 이해하면 쉽다.
- 사용법은 pin: true, 혹은 pin: "요소의 Class/ID명" 이다.
더보기
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box2", {
scrollTrigger: {
trigger: ".box2",
markers: true,
start: "top 0%",
end: "bottom 100%",
pin: true,
},
x: 400, duration: 4,
});
Pinning은 원페이지 스크롤에 쓰인다.
[Html]
더보기
<div class="section01"></div>
<div id="container">
<section class="section02"></section>
<section class="section03"></section>
<section class="section04"></section>
<section class="section05"></section>
</div>
[Css]
더보기
<style>
*{margin:0;padding:0;}
.wrap { position: relative; }
.section01 { background: orange; }
section { position: absolute; width: 100%; height: 100vh; }
.section02 { background: red; }
.section03 { background: blue; }
.section04 { background: green; }
.section05 { background: violet; }
</style>
[Script]
더보기
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.defaults({ease: "power1", duration: 3});
const tl = gsap.timeline();
tl.from(".section03", {xPercent: -100})
.from(".section04", {xPercent: 100})
.from(".section05", {yPercent: 100});
ScrollTrigger.create({
animation: tl,
trigger: "#container",
start: "top top",
end: "+=4000",
pin: true,
scrub: true,
anticipatePin: 1
});
</script>
이것을 응용하여 다음과 같은 원페이지 스크롤을 만들 수 있다.
gsap.utils는 여러 유용한 기능을 제공하는데 그중에 toArray()는 객체를 배열로 변환시켜 준다.
변환할 배열은 forEach문에 있는 section이고 ScrollTrigger.create() 를 모두 적용했다.
이 부분은 배열과 forEatch문을 공부하면 이해할 수 있지만 몰라도 쓰는데 문제 없다.
pinSpacing을 적용하거나 안하는 두 경우 모두 유용하게 쓸 수 있으므로 모두 사용해보는 것을 추천한다.
[Html]
더보기
<section class="section01">
<span>section01</span>
</section>
<section class="section02">
<span>section02</span>
</section>
<section class="section03">
<span>section03</span>
</section>
<section class="section04">
<span>section04</span>
</section>
<section class="section05">
<span>section05</span>
</section>
[Css]
더보기
<style>
*{margin:0;padding:0;}
html, body { height: 100%; margin: 0; }
section { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
.section01 { background: orange; width: 100%; height: 100%; }
.section02 { background: yellowgreen; }
.section03 { background: firebrick; }
.section04 { background: cornflowerblue; }
.section05 { background: seagreen; }
</style>
[Script]
더보기
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray("section").forEach((section, i) => {
ScrollTrigger.create({
trigger: section,
start: "top top",
pin: true,
pinSpacing: false,
});
});
ScrollTrigger.create({
snap: 1 / 4
});
</script>
5. 용어 정의 - Spinning
- Spinning은 스크롤시 화면이 수직이 아닌 수평으로 이동하는 기능을 말한다.
위에서 배운 pin, scrub, snap 모두 쓰이고 심지어 ease: "none" 도 없으면 안된다.
[Html]
더보기
<div id="container">
<section class="section01">
<h1>section01</h1>
</section>
<section class="section02">
<h1>section02</h1>
</section>
<section class="section03">
<h1>section03</h1>
</section>
<section class="section04">
<h1>section04</h1>
</section>
<section class="section05">
<h1>section05</h1>
</section>
</div>
[Css]
더보기
<style>
*{margin:0;padding:0;}
html, body { height: 100%; margin: 0; }
body { overflow-x: hidden; }
#container { width: 500%; height: 100%; display: flex; flex-wrap: nowrap; }
section { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
.section01 { background: orange; }
.section02 { background: yellowgreen; }
.section03 { background: firebrick; }
.section04 { background: cornflowerblue; }
.section05 { background: seagreen; }
</style>
[Script]
더보기
<script>
gsap.registerPlugin(ScrollTrigger);
let SECTIONS = gsap.utils.toArray("section");
gsap.to(SECTIONS, {
xPercent: -100 * ( SECTIONS.length -1 ),
ease: "none",
scrollTrigger: {
trigger: '#container',
end: ()=> "+=" + document.querySelector("#container").offsetWidth,
pin: true,
scrub: 1,
snap: 1 / (SECTIONS.length -1),
}
});
</script>
:) 참고링크
티스토리 참고링크
'FRONT > GSAP' 카테고리의 다른 글
| [GSAP] ScrollSmooth 효과 (0) | 2024.03.23 |
|---|---|
| [GSAP] TextPlugin 타이핑 효과 (0) | 2024.03.23 |
| [GSAP] ScrollTrigger 숫자 카운팅 (0) | 2024.03.23 |
| [GSAP] ScrollTrigger 중급(실전1) (0) | 2024.03.22 |
| [GSAP] ScrollTrigger 기초문법 (0) | 2024.03.22 |
