GSAP Scroll Effect03

GSAP scrollTrigger - 배경 고정시키기

section1

section2

section3

section4

section5

section6

section7

section8

section9

소스보기

gsap


    01. 한개 섹션 고정시키기
    const panel = document.querySelector("$section5");
    ScrollTrigger.create({
        trigger: panel,
        strat: "top top",
        pin: true,
        markers: true

     });

02. 여러개 섹션 고정시키기
gsap.utils.toArray(".parallax__item").forEach((panel, i) => {
    ScrollTrigger.create({
        trigger: panel,
        start: "top top",
        pin: true,
        pinSpacing: false
    })
});

// 03. 스냅 고정 효과 만들기
let panels = gsap.utils.toArray(".parallax__item");
let tops = panels.map(panel => ScrollTrigger.create({trigger: panel, start: "top top"}));

panels.forEach((panel, i) => {
    ScrollTrigger.create({
        trigger: panel,
        start: () => panel.offsetHeight < window.innerHeight ? "top top" : "bottom bottom",
        pin: true, 
        pinSpacing: false 
    });
});

ScrollTrigger.create({
    snap: {
        snapTo: (progress, self) => {
            let panelStarts = tops.map(st => st.start), 
            snapScroll = gsap.utils.snap(panelStarts, self.scroll()); 
            return gsap.utils.normalize(0, ScrollTrigger.maxScroll(window), snapScroll); 
        },
        duration: 0.5
    }
    });