GSAP with Impreza

BOX 01

var content_width = $(".gsap-column .wpb_wrapper").width();
	
// 01
gsap.to(box1, {
    duration: 5,
    x: content_width - 150,
    rotation: 720, 
    borderRadius: 100,
});

BOX 02

// 02 : trigger
gsap.to(box2, {
    duration: 5,
    x: content_width - 150,
    rotation: 720,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box2,  //시작점 설정
    }
});

BOX 03

// 03 : toggleActions
gsap.to(box3, {
    duration: 5,
    x: content_width - 150,
    rotation: 720,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box3,  //시작점 설정
        toggleActions: "play pause reverse none", 
        markers: true,
    }
});

BOX 04

// 04 : start, end
gsap.to(box4, {
    duration: 5,
    x: content_width - 150,
    rotation: 720,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box4,  //시작점 설정
        start: "top 50%",
        end: "bottom 20%",
        toggleActions: "play pause reverse pause",
        markers: true,
    }
});

BOX 05

// 05 : scrub
gsap.to(box5, {
    duration: 5,
    x: content_width - 150,
    rotation: 720,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box5,  //시작점 설정
        start: "top 50%",
        end: "bottom 20%",
        toggleActions: "play pause reverse pause",
        scrub: 0.5,    //true, 1, 2,....
        markers: true,
    }
});

BOX 06

// 06 : pin
gsap.to(box6, {
    duration: 5,
    x: content_width - 150,
    rotation: 720,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box6,  //시작점 설정
        start: "top 50%",
        end: "top 100px",
        pin: true,
        scrub: true,    
        markers: true,
    }
});

BOX 07

// 07 : toggleClass
gsap.to(box7, {
    duration: 5,
    x: content_width - 150,
    rotation: 720,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box7,  //시작점 설정
        start: "top center",
        end: "bottom top",
        scrub: true,    
        markers: true,
        toggleClass: "active",
        id: "box7"
    }
});

BOX 08

// 08 : callback
gsap.to(box8, {
    duration: 5,
    x: content_width - 150,
    rotation: 720,
    borderRadius: 100,
    scrollTrigger: {
        trigger: box8,  //시작점 설정
        start: "top center",
        end: "bottom 30%",
        scrub: true,    
        markers: false,
        // 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)},
    }
});

END