// GSAP系列模組 個別動畫 start ---------------------------------
// 統整所有模組個別動畫

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

let mode = document.querySelectorAll(".mode");

function modeAnimation() {
  mode.forEach(e => {
    let tar;
    let tar2;
    let tar3;
    let tar4;
    let tar5;
    let tl;
    let mq = window.matchMedia("(max-width: 991px)");
    let mq2 = window.matchMedia("(max-width: 767px)");
    switch (e.getAttribute("data-gsap")) {
      case "animation-13":
        // 動畫模組：mode typeF T1M1
        tar = e.querySelector(".typeF.T1M1 .mode-images");
        tar2 = e.querySelector(".typeF.T1M1 .mode-text .mode-text-inner .text-num-1");
        tar3 = e.querySelector(".typeF.T1M1 .mode-text .mode-text-inner .text-num-2");

        if (mq2.matches) {
          tl = gsap.timeline()
            .from(tar, {
            scale: 1.5,
            duration: 3,
            delay: 1,
            ease: Power1.easeIn,
            transformOrigin: "50% 0%",
            scrub: 1,
          })
            .from(tar2, {
            yPercent: -100,
            ease: Power1.easeIn,
            scale: 1.5,
            duration: 3,
            transformOrigin: "50% 50%",
            scrub: 1,
            opacity: 0,
          },">-1")
            .from(tar3, {
            opacity: 0,
            scrub: 1,
          },">");

          ScrollTrigger.create({
            trigger: e,
            pin: true,
            pinSpacing: true,
            anticipatePin: true,
            ease: Power1.easeIn,
            start: "top 10%",
            end: "+=600",
            scrub: 0,
            once: true,
            animation: tl,
            onLeave: function (self) {
              self.scroll(self.start);
              self.disable();
              self.animation.progress(1);
              ScrollTrigger.refresh();
            },
          });
        } else {
          tl = gsap.timeline()
            .from(tar2, {
            yPercent: -280,
            ease: Power1.easeIn,
            scale: 2,
            duration: 5,
            scrub: 1,
          })
            .from(tar, {
            yPercent: 280,
            scale: 3,
            duration: 5,
            ease: Power1.easeIn,
            scrub: 1,
          },">-4")
            .from(tar3, {
            opacity: 0,
            duration: 3,
            scrub: 1,
          },">");

          ScrollTrigger.create({
            trigger: e,
            pin: true,
            pinSpacing: true,
            anticipatePin: true,
            ease: Power1.easeIn,
            start: "top top",
            end: "+=1500",
            scrub: 0,
            once: true,
            animation: tl,
            onLeave: function (self) {
              self.scroll(self.start);
              self.disable();
              self.animation.progress(1);
              ScrollTrigger.refresh();
            },
          });
        };
      break;
      case "animation-14":
        // 動畫模組：mode typeF T1M1 inner
        tar = e.querySelector('.typeF.T1M1.inner .text-on-banner');

        tl = gsap.timeline()
          .from(tar, {
          xPercent: 50,
          duration: 1,
          ease: Power1.easeIn,
          opacity: 0,
          scrub: 1,
        });
        ScrollTrigger.create({
          trigger: e,
          start: "center center",
          end: "+=1000",
          pin: true,
          pinSpacing: true,
          anticipatePin: true,
          scrub: 0,
          once: true,
          animation: tl,
          onLeave: function (self) {
            self.scroll(self.start);
            self.disable();
            self.animation.progress(1);
            ScrollTrigger.refresh();
          },
        });
      break;
      case "animation-15":
        // 動畫模組：mode typeA T1M3
        tar = e.querySelector(".typeA.T1M3 .text-num-1");
        tar2 = e.querySelector(".typeA.T1M3 .text-num-2");
        tar3 = e.querySelector(".typeA.T1M3 .images-num-1");
        tar4 = e.querySelector(".typeA.T1M3 .images-num-2");
        tar5 = e.querySelector(".typeA.T1M3 .images-num-3");

        if (mq.matches) {
          tl = gsap.timeline()
            .fromTo(tar, {
            opacity: 0,
            yPercent: -100,
          },{
            start: "center center",
            end: "+=300",
            scrub: 1,
            opacity: 1,
            duration: 1,
            yPercent: 0,
          },"-=4")
            .fromTo(tar3, {
            xPercent: 80,
            yPercent: 100,
            opacity: 0,
            scale: 1.3,
            transformOrigin: "50% 50%",
            zIndex:1,
          },{
            ease: Power1.easeIn,
            start: "center 70%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1,
            xPercent: 0,
            yPercent: 0,
          },">")
            .fromTo(tar4, {
            xPercent: -120,
            yPercent: -250,
            opacity: 0,
            scale: 0.7,
            transformOrigin: "50% 50%",
          },{
            ease: Power1.easeIn,
            start: "bottom 70%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1,
            xPercent: 0,
            yPercent: 0,
          },"<")
            .fromTo(tar5, {
            xPercent: 150,
            yPercent: -350,
            opacity: 0,
            scale: 0.75,
            transformOrigin: "50% 50%",
          },{
            ease: Power1.easeIn,
            start: "bottom 80%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1,
            xPercent: 0,
            yPercent: 0,
          },"<")
            .fromTo(tar2, {
            opacity: 0,
          },{
            ease: Power1.easeIn,
            start: "bottom 80%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            duration: 1,
          },">-=1");

          ScrollTrigger.create({
            trigger: e,
            pin: true,
            pinSpacing: true,
            anticipatePin: true,
            start: "top top",
            end: "+=1200",
            scrub: 0,
            once: true,
            animation: tl,
            onLeave: function (self) {
              self.scroll(self.start);
              self.disable();
              self.animation.progress(1);
              ScrollTrigger.refresh();
            },
          });
        } else {
          tl = gsap.timeline()
            .fromTo(tar, {
            scale: 2,
            opacity: 1,
          },{
            start: "center center",
            end: "+=600",
            scrub: 1,
            scale: 1,
            duration: 1.5,
          })
            .fromTo(tar3, {
            xPercent: 100,
            yPercent: 50,
            opacity: 0,
            scale: 1.3,
            delay: 1,
            zIndex:1,
          },{
            ease: Power1.easeIn,
            start: "center 70%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1.5,
            xPercent: 0,
            yPercent: 0,
          },">-=1")
            .fromTo(tar4, {
            xPercent: -100,
            yPercent: 30,
            opacity: 0,
            scale: 0.7,
            delay: 1,
          },{
            ease: Power1.easeIn,
            start: "bottom 70%",
            end: "+=400",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1.5,
            xPercent: 0,
            yPercent: 0,
          },"<+=25%")
            .fromTo(tar5, {
            xPercent: 30,
            yPercent: -70,
            opacity: 0,
            scale: 0.75,
            delay: 1,
            transformOrigin: "50% 50%",
          },{
            ease: Power1.easeIn,
            start: "bottom 80%",
            end: "+=400",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1.5,
            xPercent: 0,
            yPercent: 0,
          },"<+=25%")
            .fromTo(tar2, {
            yPercent: -10,
            opacity: 0,
            delay: 1,
          },{
            ease: Power1.easeIn,
            start: "bottom 80%",
            end: "+=400",
            scrub: 1,
            yPercent: 0,
            opacity: 1,
          },">-=1");

          ScrollTrigger.create({
            trigger: e,
            pin: true,
            pinSpacing: true,
            anticipatePin: true,
            start: "center 60%",
            end: "+=1200",
            scrub: 0,
            once: true,
            animation: tl,
            onLeave: function (self) {
              self.scroll(self.start);
              self.disable();
              self.animation.progress(1);
              ScrollTrigger.refresh();
            },
          });
        };
      break;
      case "animation-16":
        // 動畫模組：mode typeA T1M3 reverse
        tar = e.querySelector(".typeA.T1M3.reverse .text-num-1");
        tar2 = e.querySelector(".typeA.T1M3.reverse .text-num-2");
        tar3 = e.querySelector(".typeA.T1M3.reverse .images-num-1");
        tar4 = e.querySelector(".typeA.T1M3.reverse .images-num-2");
        tar5 = e.querySelector(".typeA.T1M3.reverse .images-num-3");

        if (mq.matches) {
          tl = gsap.timeline()
            .fromTo(tar, {
            opacity: 0,
            yPercent: -100,
          },{
            start: "center center",
            end: "+=300",
            scrub: 1,
            opacity: 1,
            duration: 1,
            yPercent: 0,
          },"-=4")
            .fromTo(tar3, {
            xPercent: -80,
            yPercent: 100,
            opacity: 0,
            scale: 1.3,
            transformOrigin: "50% 50%",
            zIndex:1,
          },{
            ease: Power1.easeIn,
            start: "center 70%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1,
            xPercent: 0,
            yPercent: 0,
          },">")
            .fromTo(tar4, {
            xPercent: -120,
            yPercent: -250,
            opacity: 0,
            scale: 0.7,
            transformOrigin: "50% 50%",
          },{
            ease: Power1.easeIn,
            start: "bottom 70%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1,
            xPercent: 0,
            yPercent: 0,
          },"<")
            .fromTo(tar5, {
            xPercent: 150,
            yPercent: -350,
            opacity: 0,
            scale: 0.75,
            transformOrigin: "50% 50%",
          },{
            ease: Power1.easeIn,
            start: "bottom 80%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1,
            xPercent: 0,
            yPercent: 0,
          },"<")
            .fromTo(tar2, {
            opacity: 0,
          },{
            ease: Power1.easeIn,
            start: "bottom 80%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            duration: 1,
          },">-=1");

          ScrollTrigger.create({
            trigger: e,
            pin: true,
            pinSpacing: true,
            anticipatePin: true,
            start: "top top",
            end: "+=1200",
            scrub: 0,
            once: true,
            animation: tl,
            onLeave: function (self) {
              self.scroll(self.start);
              self.disable();
              self.animation.progress(1);
              ScrollTrigger.refresh();
            },
          });
        } else {
          tl = gsap.timeline()
            .fromTo(tar, {
            scale: 2,
            opacity: 1,
          },{
            start: "center center",
            end: "+=600",
            scrub: 1,
            scale: 1,
            duration: 1.5,
          })
            .fromTo(tar3, {
            xPercent: -100,
            yPercent: 50,
            opacity: 0,
            scale: 1.3,
            delay: 1,
            zIndex:1,
          },{
            ease: Power1.easeIn,
            start: "center 70%",
            end: "+=200",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1,
            xPercent: 0,
            yPercent: 0,
          },">-=1")
            .fromTo(tar4, {
            xPercent: 100,
            yPercent: 30,
            opacity: 0,
            scale: 0.7,
            delay: 1,
          },{
            ease: Power1.easeIn,
            start: "bottom 70%",
            end: "+=400",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1,
            xPercent: 0,
            yPercent: 0,
          },"<+=25%")
            .fromTo(tar5, {
            xPercent: -30,
            yPercent: -70,
            opacity: 0,
            scale: 0.75,
            delay: 1,
            transformOrigin: "50% 50%",
          },{
            ease: Power1.easeIn,
            start: "bottom 80%",
            end: "+=400",
            scrub: 1,
            opacity: 1,
            scale: 1,
            duration: 1,
            xPercent: 0,
            yPercent: 0,
          },"<+=25%")
            .fromTo(tar2, {
            yPercent: -10,
            opacity: 0,
            delay: 1,
          },{
            ease: Power1.easeIn,
            start: "bottom 80%",
            end: "+=400",
            scrub: 1,
            yPercent: 0,
            opacity: 1,
          },">-=1");

          ScrollTrigger.create({
            trigger: e,
            pin: true,
            pinSpacing: true,
            anticipatePin: true,
            start: "center 60%",
            end: "+=1200",
            scrub: 0,
            once: true,
            animation: tl,
            onLeave: function (self) {
              self.scroll(self.start);
              self.disable();
              self.animation.progress(1);
              ScrollTrigger.refresh();
            },
          });
        };
      break;
      case "animation-19":
        // 動畫模組：mode typeA T1M2 column
        tar = e.querySelectorAll('.typeA.T1M2.column .mode-text.mode-images .mode-images-inner')[0];
        tar2 = e.querySelectorAll('.typeA.T1M2.column .mode-text.mode-images .mode-images-inner')[1];

        gsap.from(tar, {
          scrollTrigger: {
            trigger: e,
            toggleActions: "play pause resume reset",
          },
          yPercent: -15,
          ease: Power1.easeIn,
          opacity: 0,
          scrub: 1,
          start: "20% bottom",
          end: "+=300",
        });
        gsap.from(tar2, {
          scrollTrigger: {
            trigger: e,
            toggleActions: "play pause resume reset",
          },
          yPercent: 15,
          ease: Power1.easeIn,
          opacity: 0,
          scrub: 1,
          start: "20% bottom",
          end: "+=300",
        });
      break;
    };
    // end switch
  });
};

mode.length >= 1 ? modeAnimation() : "";

// GSAP系列模組 個別動畫 end ---------------------------------