GSAP Parallax Effect01

GSAP scrollTrigger - 애니메이션 기본 효과
소스보기
gsap

// 01
gsap.to(box1, {
    duration: 2,
    x: 500,
    borderRadius: 100,
    rotation: 360 
});

// 02 : trigger - 화면에 이미지가 보이면 동작
gsap.to(box2, {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box2
    }
});

// 03 : toggleActions
gsap.to(box3, {
    duration: 2,
    x: 500,
    rotarion: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box3,
        toggleActions: "play none reverse none"     // play pause resume reverse restart reset complete none
                                                    // onEnter onLeave onEnterBack onLeaveBack
    }
});

// 04 : start, end : 애니메이션 시작순간과 끝나는 순간 정하기
gsap.to(box4, {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
            trigger: box4,
            start: "top 50%",
            end: "bottom 20%",
            toggleActions: "play none reverse none",
            markers: false
    }
});

// 05 : scrub : 움직일때마다 애니메이션 작동
gsap.to(box5, {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box5,
        start: "top 50%",
        end: "bottom 20%",
        scrub: true     // 1 또는 2도 가능  - 속도 조절
    }
});

// 06 : pin : 원하는 위치로 이동
gsap.to(box6, {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box6,
        start: "top 50%",
        end: "bottom 400px",
        scrub: true,
        pin: true
    }
});

// 07 : toggleClass : 클래스 추가
gsap.to(box7, {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box7,
        start: "top center",
        end: "bottom 20%",
        scrub: true,
        toggleClass: "active",
        id: "box7",
        markers: true
    }
});

// 08 : callback
gsap.to(box8, {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box8,
        start: "top center",
        end: "bottom 20%",
            scrub: true,
        // onEnter: () => {console.log("onEnter")},
        // onLeave: () => {console.log("onLeave")},
        // onEnterBack: () => {console.log("onEnterBack")},
        // onLeaveBack: () => {console.log("onLeaveBack")},
        onUpdate: (self) => {console.log("onUpdate", self.progress.toFixed(3))},
        onToggle: (self) => {console.log("onToggle", self.isActive)}
    }
});