GSAP with Impreza
CODE
// 01 : 이미지 애니메이션 주기 -------------------------- 
const ani1 = gsap.timeline();
ani1.to("#section-01 .target", {rotation: 720, scale: 0, borderRadius: 200})
    .to("#section-01 .target", {rotation: 0, scale: 1, borderRadius: 20});
ScrollTrigger.create({
    animation: ani1,
    trigger: "#section-01",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
    markers: false
});

anticipatePin 값은 1로 설정되어 있으며, 이는 요소가 도달해야 하는 위치보다 1개의 화면 높이만큼 앞서서 고정되도록 만듭니다. 이렇게 함으로써 고정 요소가 더 자연스럽게 화면에 고정되는 효과를 얻을 수 있습니다.

CODE
// 02 : 이미지 순차적으로 나오기
const ani2 = gsap.timeline();
ani2.from("#section-02 .img-1", {y: -100, autoAlpha:0, borderRadius: 200})
    .from("#section-02 .img-2", {y: 100, autoAlpha:0, borderRadius: 200})
    .from("#section-02 .img-3", {y: -100, autoAlpha:0, borderRadius: 200});
ScrollTrigger.create({
    animation: ani2,
    trigger: "#section-02",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
    markers: false
});
CODE
// 03 : 이미지 랜덤으로 떨어지기 
const ani3 = gsap.timeline();
ani3.from("#section-03 .img", {
    autoAlpha: 0,
    y: -100,
    ease: "back.out(4)",
    stagger: {
        amount: 3,
        from: "random"
    }
})
ScrollTrigger.create({
    animation: ani3,
    trigger: "#section-03",
    start: "top top",
    end: "+=3000",
    scrub: true,
    pin: true,
    markers: false,
    anticipatePin: 1
});
CODE
// 04 : 이미지 축소하기
const ani4 = gsap.timeline();
ani4.from("#section-04 .img", {
    autoAlpha:0, 
    scale: 5,
    width: "100vw",
    height: "100vh"
})
ScrollTrigger.create({
    animation: ani4,
    trigger: "#section-04",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
    markers: false,
    anticipatePin: 1
});
CODE
// 05 : 텍스트 애니메이션
const ani5 = gsap.timeline();
ani5.to("#section-05 .text1", {xPercent: 300}, "text")
    .to("#section-05 .text2", {xPercent: -300}, "text")
    .to("#section-05 .text3", {xPercent: 300}, "text")
    .to("#section-05 .text4", {xPercent: -300}, "text")

ScrollTrigger.create({
    animation: ani5,
    trigger: "#section-05",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
    markers: true,
    anticipatePin: 1
});
ANIMATION TEXT
ANIMATION TEXT
ANIMATION TEXT
ANIMATION TEXT
CODE
// 06 : 텍스트 확대하기
const ani6 = gsap.timeline();
ani6.to("#section-06 .text", {scale: 50, duration: 2, autoAlpha: 1})
    .to("#section-06 .text", {autoAlpha: 0})
ScrollTrigger.create({
    animation: ani6,
    trigger: "#section-06",
    start: "top top",
    end: "+=4000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
    markers: false
});
ANIMATION TEXT
ANIMATION TEXT 1
ANIMATION TEXT 2
ANIMATION TEXT 3
ANIMATION TEXT 4
ANIMATION TEXT 5
ANIMATION TEXT 6
ANIMATION TEXT 7
CODE
// 07 : 텍스트 제자리 애니메이션
const ani7 = gsap.timeline();
ani7.from("#section-07 .text1", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
    .from("#section-07 .text2", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
    .from("#section-07 .text3", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
    .from("#section-07 .text4", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
    .from("#section-07 .text5", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
    .from("#section-07 .text6", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
    .from("#section-07 .text7", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
ScrollTrigger.create({
    animation: ani7,
    trigger: "#section-07",
    start: "top top",
    end: "+=6000",
    scrub: true,
    pin: true,
    markers: false,
    anticipatePin: 1
});
CODE
// 05 : 텍스트 애니메이션
const ani5 = gsap.timeline();
ani5.to("#section-05 .text1", {xPercent: 300}, "text")
    .to("#section-05 .text2", {xPercent: -300}, "text")
    .to("#section-05 .text3", {xPercent: 300}, "text")
    .to("#section-05 .text4", {xPercent: -300}, "text")

ScrollTrigger.create({
    animation: ani5,
    trigger: "#section-05",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
    markers: true,
    anticipatePin: 1
});
ANIMATION TEXT
ANIMATION TEXT
ANIMATION TEXT
CODE
//09 : 이미지 확대하기
const ani9 = gsap.timeline();
ani9.to("#section-09 .img", {scale: 13})
    .to("#section-09 .img", {autoAlpha: 0})
ScrollTrigger.create({
    animation: ani9,
    trigger: "#section-09",
    start: "top top",
    end: "+=4000",
    scrub: true,
    pin: true,
    markers: false,
    anticipatePin: 1
});

END