locoScroll.on("scroll", ScrollTrigger.update);

// tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy(".scrollContainer", {
  scrollTop(value) {
    return arguments.length
      ? locoScroll.scrollTo(value, 0, 0)
      : locoScroll.scroll.instance.scroll.y;
  }, // we don't have to define a scrollLeft because we're only scrolling vertically.
  getBoundingClientRect() {
    return {
      top: 0,
      left: 0,
      width: window.innerWidth,
      height: window.innerHeight,
    };
  },
  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
  pinType: document.querySelector(".scrollContainer").style.transform
    ? "transform"
    : "fixed",
});

gsap.to(".loader h2", {
  duration: 1,
  opacity: 0.25,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
});

var x = document.getElementsByClassName("headtext"); // x is an array
var headtext1 = x[0]; // get first element

var y = document.getElementsByClassName("heading"); // x is an array
var heading1 = x[0]; // get first element

var scrollmore = document.getElementsByClassName("scrollmore");

gsap.registerPlugin(ScrollTrigger);

/*DISABLED ON MOBILE*/
ScrollTrigger.matchMedia({
  "(min-width: 601px)": function () {
    gsap.from(headtext1, {
      opacity: 0,
      scale: 0.75,
      ease: "none",
      duration: 0.5,
      delay: 1,
    });

    /*TL - FADE IN SCROLL*/
    var fadeInScroll = gsap.timeline({
      scrollTrigger: {
        trigger: "#trigger1",
        start: "+=100",
        scroller: ".scrollContainer",
        end: "+=100px",
        scrub: 1,
        snap: true,
      },
    });

    fadeInScroll.fromTo(
      scrollmore,
      {
        opacity: 0,
      },
      {
        opacity: 1,
      }
    );

    gsap.to("#dark", {
      scrollTrigger: {
        trigger: "#trigger1",
        start: "top top",
        scroller: ".scrollContainer",
        end: "+=25px",
        scrub: 1,
        snap: true,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#glowing", {
      scrollTrigger: {
        trigger: "#trigger1",
        start: "+=100",
        scroller: ".scrollContainer",
        end: "+=100px",
        scrub: 1,
        snap: true,
      },
      opacity: 0,
      ease: "none",
    });

    var startCount = 0,
      num = { var: startCount };

    gsap
      .timeline({
        scrollTrigger: {
          trigger: ".section-s1",
          start: "top 60%",
          end: "+=500",
          scrub: true,
          scroller: ".scrollContainer",
        },
      })
      .to(num, { var: 100, duration: 5, ease: "none", onUpdate: changeNumber })
      .to({}, { duration: 2 });

    function changeNumber() {
      countup.innerHTML = num.var.toFixed();
    }

    /*SECTION 2*/
    gsap.to("#outside", {
      scrollTrigger: {
        trigger: ".section-s2",
        start: "top 15%",
        end: "+=125px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      ease: "none",
    });

    /*SECTION 3*/
    gsap.to("#gti1", {
      scrollTrigger: {
        trigger: "#trigger6",
        start: "top top",
        end: "+=10px",
        scroller: ".scrollContainer",
        scrub: true,
        snap: 0.1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#gti6", {
      scrollTrigger: {
        trigger: "#trigger6",
        start: "200px top",
        end: "+=10px",
        scroller: ".scrollContainer",
        scrub: true,
        snap: 0.1,
      },
      opacity: 0,
      ease: "none",
    });

    /*HANDPIECE*/
    gsap.to("#front", {
      scrollTrigger: {
        trigger: ".section-s7",
        start: "top 20%",
        end: "+=200px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      ease: "none",
    });

    /*DASHBOARD*/
    gsap.to("#ph1", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "90px 20%",
        end: "+=10px",
        scroller: ".scrollContainer",
        scrub: true,
        snap: 0.1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#dashboard h2:nth-child(1)", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "90px 20%",
        end: "+=100px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 1,
      ease: "none",
    });

    gsap.to("#ph2", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "150px 20%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: true,
        snap: 0.1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#desktop", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "150px 20%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: 1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#desktop1", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "250px 20%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: 1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#dashboard h2:nth-child(2)", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "250px 20%",
        end: "+=100px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 1,
      ease: "none",
    });

    gsap.to("#desktop2", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "400px 20%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: 1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#dashboard h2:nth-child(3)", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "400px 20%",
        end: "+=100px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 1,
      ease: "none",
    });

    gsap.to("#unlit", {
      scrollTrigger: {
        trigger: "#trigger10",
        start: "200px 50%",
        end: "+=100px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      ease: "none",
    });

    /*SECTION 12 REVEAL*/
    gsap.to("#alloff", {
      scrollTrigger: {
        trigger: "#trigger12",
        start: "100px 40%",
        end: "+=100px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#presets h2:nth-child(1)", {
      scrollTrigger: {
        trigger: "#trigger12",
        start: "100px 50%",
        end: "+=100px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 1,
      ease: "none",
    });

    gsap.to("#nonsurgical", {
      scrollTrigger: {
        trigger: "#trigger12",
        start: "300px 40%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#presets h2:nth-child(2)", {
      scrollTrigger: {
        trigger: "#trigger12",
        start: "300px 40%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 1,
      ease: "none",
    });

    gsap.to("#surgical", {
      scrollTrigger: {
        trigger: "#trigger12",
        start: "500px 40%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#presets h2:nth-child(3)", {
      scrollTrigger: {
        trigger: "#trigger12",
        start: "500px 40%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 1,
      ease: "none",
    });

    gsap.to("#painrelief", {
      scrollTrigger: {
        trigger: "#trigger12",
        start: "650px 40%",
        end: "+50px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      ease: "none",
    });

    /*SECTION 13 REVEAL*/
    gsap.from(
      [
        ".section-s13 p:nth-child(1)",
        ".section-s13 p:nth-child(2)",
        ".section-s13 p:nth-child(3)",
        ".section-s13 p:nth-child(4)",
        ".section-s13 button",
      ],
      {
        scrollTrigger: {
          trigger: "#trigger13",
          start: "top 30%",
          end: "+=200px",
          scroller: ".scrollContainer",
          scrub: true,
        },
        opacity: 0,
        x: -100,
        stagger: 5,
        ease: "none",
      }
    );

    /*SECTION 15 REVEAL*/
    gsap.from(".section-s15 p", {
      scrollTrigger: {
        trigger: "#trigger15",
        start: "top 30%",
        end: "+=200px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      stagger: 5,
      ease: "none",
    });

    gsap.to("#box2", {
      scrollTrigger: {
        trigger: ".section-s15",
        start: "top 40%",
        end: "+=300px",
        scrub: 1,
        scroller: ".scrollContainer",
      },
      y: -225,
      ease: "none",
      duration: 0.5,
    });

    gsap.to("#box3", {
      scrollTrigger: {
        trigger: ".section-s15",
        start: "top 40%",
        end: "+=300px",
        scrub: 1,
        scroller: ".scrollContainer",
      },
      y: -200,
      ease: "none",
      duration: 0.5,
    });
  },
});

/*MOBILE ONLY*/
ScrollTrigger.matchMedia({
  "(max-width: 601px)": function () {
    gsap.from(headtext1, {
      opacity: 0,
      scale: 0.75,
      ease: "none",
      duration: 0.5,
      delay: 1,
    });

    gsap.to(headtext1, {
      y: 18,
      duration: 0.5,
      delay: 1,
    });

    gsap.to(".scrollmore", {
      opacity: 1,
      duration: 0.5,
      delay: 2.5,
    });

    gsap.to("#dark", {
      opacity: 0,
      ease: "none",
      duration: 0.5,
      delay: 1,
    });

    gsap.to("#glowing", {
      opacity: 0,
      ease: "none",
      duration: 0.5,
      delay: 2,
    });


    var startCount = 0,
      num = { var: startCount };

    gsap
      .timeline({
        scrollTrigger: {
          trigger: ".section-s1",
          start: "top 50%",
          end: "+=200",
          scrub: true,
          scroller: ".scrollContainer",
        },
      })
      .to(num, { var: 100, duration: 5, ease: "none", onUpdate: changeNumber })
      .to({}, { duration: 2 });

    function changeNumber() {
      countup.innerHTML = num.var.toFixed();
    }

    /*SECTION 2*/
    gsap.to("#outside", {
      scrollTrigger: {
        trigger: ".section-s2",
        start: "top 10%",
        end: "+=50vh",
        scroller: ".scrollContainer",
        scrub: 1,
      },
      opacity: 0,
      ease: "none",
    });

    /*SECTION 6*/
    gsap.to("#gti1", {
      scrollTrigger: {
        trigger: "#trigger6",
        start: "top top",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: true,
        snap: 0.1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#gti6", {
      scrollTrigger: {
        trigger: "#trigger6",
        start: "150px top",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: true,
        snap: 0.1,
      },
      opacity: 0,
      ease: "none",
    });

    /*SECTION 7*/
    gsap.to("#front", {
      scrollTrigger: {
        trigger: ".section-s7",
        start: "top 10%",
        end: "+=50vh",
        scroller: ".scrollContainer",
        scrub: 1,
        snap: 1,
      },
      opacity: 0,
      ease: "none",
    });

    /*SECTION 9*/
    gsap.to("#ph1", {
      scrollTrigger: {
        trigger: ".section-s9",
        start: "55% center",
        end: "+=50vh",
        scroller: ".scrollContainer",
        scrub: 1,
        snap: 1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#ph2", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "200px 20%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: true,
        snap: 0.1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#desktop", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "200px 20%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: 1,
      },
      opacity: 0,
      ease: "none",
    });

    gsap.to("#desktop1", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "300px 20%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: 1,
      },
      opacity: 0,
      ease: "none",
    });


    gsap.to("#desktop2", {
      scrollTrigger: {
        trigger: "#trigger9",
        start: "450px 20%",
        end: "+=50px",
        scroller: ".scrollContainer",
        scrub: 1,
      },
      opacity: 0,
      ease: "none",
    });

    /*SECTION 10*/
    gsap.to("#unlit", {
      scrollTrigger: {
        trigger: ".section-s10",
        start: "top 10%",
        end: "+=50vh",
        scroller: ".scrollContainer",
        scrub: 1,
        snap: 1,
      },
      opacity: 0,
      ease: "none",
    });

    /*SECTION 12*/
    gsap.to("#alloff", {
      scrollTrigger: {
        trigger: ".section-s12",
        start: "top 10%",
        end: "+=50vh",
        scroller: ".scrollContainer",
        scrub: 1,
        snap: 1,
      },
      opacity: 0,
      ease: "none",
    });

    /*SECTION 13*/
    gsap.from(".section-s13 p:nth-child(1)", {
      scrollTrigger: {
        trigger: ".section-s13",
        start: "100px 90%",
        end: "+=10px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      x: -50,
      ease: "none",
    });
    gsap.from(".section-s13 p:nth-child(2)", {
      scrollTrigger: {
        trigger: ".section-s13",
        start: "200px 90%",
        end: "+=10px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      x: -50,
      ease: "none",
    });
    gsap.from(".section-s13 p:nth-child(3)", {
      scrollTrigger: {
        trigger: ".section-s13",
        start: "300px 90%",
        end: "+=10px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      x: -50,
      ease: "none",
    });
    gsap.from(".section-s13 p:nth-child(4)", {
      scrollTrigger: {
        trigger: ".section-s13",
        start: "400px 90%",
        end: "+=10px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      x: -50,
      ease: "none",
    });
    gsap.from(".section-s13 p:nth-child(5)", {
      scrollTrigger: {
        trigger: ".section-s13",
        start: "500px 90%",
        end: "+=10px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      x: -50,
      ease: "none",
    });
    /*SECTION 15 REVEAL*/
    gsap.from(".section-s15 p", {
      scrollTrigger: {
        trigger: "#trigger15",
        start: "top 50%",
        end: "+=200px",
        scroller: ".scrollContainer",
        scrub: true,
      },
      opacity: 0,
      stagger: 5,
      ease: "none",
    });

    gsap.to("#box2", {
      scrollTrigger: {
        trigger: ".section-s15",
        start: "top 50%",
        end: "+=200px",
        scrub: 1,
        scroller: ".scrollContainer",
      },
      y: -150,
      ease: "none",
      duration: 0.5,
    });

    gsap.to("#box3", {
      scrollTrigger: {
        trigger: ".section-s15",
        start: "top 50%",
        end: "+=200px",
        scrub: 1,
        scroller: ".scrollContainer",
      },
      y: -90,
      ease: "none",
      duration: 0.5,
    });
  },
});

/*SIMPLE ANIMATIONS*/
gsap.to("#arrows", {
  duration: 1,
  y: -5,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
});

gsap.to(".scrollmore p", {
  duration: 1,
  opacity: 0.5,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
});

/*SECTION 1*/
var h = document.getElementsByTagName("h1"); // x is an array
var headings1 = h[1]; // get first element

var p = document.getElementsByTagName("p");
var paragraphs1 = p[2];
var paragraph2s1 = p[3];
var paragraph3s1 = p[4];

gsap.from(".section-s1 h1", {
  scrollTrigger: {
    trigger: ".section-s1",
    start: "top 50%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s1 p", {
  scrollTrigger: {
    trigger: ".section-s1",
    start: "top 35%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
  delay: 1,
});

gsap.from(".leftcontainer-s1", {
  scrollTrigger: {
    trigger: ".section-s1",
    start: "top 50%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  ease: "none",
});

gsap.from("#imgs1", {
  scrollTrigger: {
    trigger: ".section-s1",
    start: "top 50%",
    scroller: ".scrollContainer",
    scrub: 1,
  },
  y: -25,
  ease: "none",
});

var tl = new TimelineMax({ repeat: -1 });
tl.staggerTo(
  [".cls-2"],
  1,
  {
    strokeDashoffset: 3540,
    ease: Linear.easeNone,
    onComplete: function () {
      TweenMax.set(this.target, { strokeDashoffset: 3540 });
    },
  },
  1
);

var firstcard = new TimelineMax({ repeat: -1 });
firstcard.staggerTo(
  [".cls-3"],
  1,
  {
    strokeDashoffset: -4352,
    ease: Linear.easeNone,
    onComplete: function () {
      TweenMax.set(this.target, { strokeDashoffset: 4352 });
    },
  },
  1
);

var thirdcard = new TimelineMax({ repeat: -1 });
thirdcard.staggerTo(
  [".cls-5"],
  1,
  {
    strokeDashoffset: -3357,
    ease: Linear.easeNone,
    onComplete: function () {
      TweenMax.set(this.target, { strokeDashoffset: 2729 });
    },
  },
  1
);

var firstcard1 = new TimelineMax({ repeat: -1 });
firstcard1.staggerTo(
  [".cls-8"],
  2,
  {
    strokeDashoffset: -2729,
    ease: Linear.easeNone,
    onComplete: function () {
      TweenMax.set(this.target, { strokeDashoffset: 2729 });
    },
  },
  2
);

var thirdcard1 = new TimelineMax({ repeat: -1 });
thirdcard1.staggerTo(
  [".cls-10"],
  3,
  {
    strokeDashoffset: -4352,
    ease: Linear.easeNone,
    onComplete: function () {
      TweenMax.set(this.target, { strokeDashoffset: 4352 });
    },
  },
  3
);

gsap.from("#svgs1", {
  scrollTrigger: {
    trigger: ".section-s1",
    start: "top 15%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  ease: "none",
  duration: 0.5,
});

gsap.from("#imgs1", {
  scrollTrigger: {
    trigger: ".section-s1",
    start: "top 50%",
    scroller: ".scrollContainer",
    scrub: 1,
  },
  y: -50,
  ease: "none",
});

/*SECTION 2 TEXT*/
gsap.from(".section-s2 h1", {
  scrollTrigger: {
    trigger: ".section-s2",
    start: "top 500vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s2 h1 span", {
  scrollTrigger: {
    trigger: ".section-s2",
    start: "top 250vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

/*SECTION 3*/
gsap.from(".section-s3 h1", {
  scrollTrigger: {
    trigger: ".section-s3",
    start: "top center",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from("#firstwv", {
  scrollTrigger: {
    trigger: ".section-s3",
    start: "top 60%",
    end: "+=10px",
    scroller: ".scrollContainer",
    scrub: true,
  },
  opacity: 0,
  y: 150,
  ease: "none",
  duration: 0.5,
});

gsap.from("#thirdwv", {
  scrollTrigger: {
    trigger: ".section-s3",
    start: "top 40%",
    end: "+=10px",
    scroller: ".scrollContainer",
    scrub: true,
  },
  opacity: 0,
  y: 150,
  ease: "none",
  duration: 0.5,
});

gsap.from("#secondwv", {
  scrollTrigger: {
    trigger: ".section-s3",
    start: "top 20%",
    end: "+=10px",
    scroller: ".scrollContainer",
    scrub: true,
  },
  opacity: 0,
  y: 150,
  ease: "none",
  duration: 0.5,
});

/*SECTION 4*/
gsap.from(".section-s4 h1", {
  scrollTrigger: {
    trigger: ".section-s4",
    start: "top 50%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s4 p", {
  scrollTrigger: {
    trigger: ".section-s4",
    start: "top 35%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
  delay: 1,
});

gsap.from(".leftcontainer-s4", {
  scrollTrigger: {
    trigger: ".section-s4",
    start: "top 50%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  ease: "none",
});

gsap.from("#imgs4", {
  scrollTrigger: {
    trigger: ".section-s4",
    start: "top 50%",
    scroller: ".scrollContainer",
    scrub: 1,
  },
  y: -50,
  ease: "none",
});

/*SECTION 5*/
gsap.from(".section-s5 h1", {
  scrollTrigger: {
    trigger: ".section-s5",
    start: "top center",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from("#size1", {
  scrollTrigger: {
    trigger: ".section-s5",
    start: "top 60%",
    end: "+=10px",
    scroller: ".scrollContainer",
    scrub: true,
  },
  opacity: 0,
  y: 150,
  ease: "none",
  duration: 0.5,
});

gsap.from("#size2", {
  scrollTrigger: {
    trigger: ".section-s5",
    start: "top 40%",
    end: "+=10px",
    scroller: ".scrollContainer",
    scrub: true,
  },
  opacity: 0,
  y: 150,
  ease: "none",
  duration: 0.5,
});

gsap.from("#size3", {
  scrollTrigger: {
    trigger: ".section-s5",
    start: "top 20%",
    end: "+=10px",
    scroller: ".scrollContainer",
    scrub: true,
  },
  opacity: 0,
  y: 150,
  ease: "none",
  duration: 0.5,
});

/*SECTION 6*/
gsap.from(".section-s6 h1", {
  scrollTrigger: {
    trigger: ".section-s6",
    start: "top 50%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s6 p", {
  scrollTrigger: {
    trigger: ".section-s6",
    start: "top 35%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  ease: "none",
  duration: 0.5,
  delay: 1,
});

gsap.to("#icons6", {
  duration: 1.5,
  opacity: 0.5,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
});

/*SECTION 7 TEXT*/
gsap.from(".section-s7 h1", {
  scrollTrigger: {
    trigger: ".section-s7",
    start: "top 500vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s7 p", {
  scrollTrigger: {
    trigger: ".section-s7",
    start: "top 250vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

/*SECTION 8*/
gsap.from(".section-s8 h1", {
  scrollTrigger: {
    trigger: ".section-s8",
    start: "top 50%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s8 p", {
  scrollTrigger: {
    trigger: ".section-s8",
    start: "top 35%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  ease: "none",
  duration: 0.5,
  delay: 1,
});

gsap.from(".leftcontainer-s8", {
  scrollTrigger: {
    trigger: ".section-s8",
    start: "top 50%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  ease: "none",
});

gsap.from("#imgs8", {
  scrollTrigger: {
    trigger: ".section-s8",
    start: "top 50%",
    scroller: ".scrollContainer",
    scrub: 1,
  },
  y: -50,
  ease: "none",
});

gsap.to("#icons8", {
  duration: 1.5,
  opacity: 0.5,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
});

/*SECTION 9 TEXT*/
gsap.from(".section-s9 h1", {
  scrollTrigger: {
    trigger: ".section-s9",
    start: "top 500vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s9 p", {
  scrollTrigger: {
    trigger: ".section-s9",
    start: "top 250vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

/*SECTION 10 TEXT*/
gsap.from(".section-s10 h1", {
  scrollTrigger: {
    trigger: ".section-s10",
    start: "top 500vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s10 p", {
  scrollTrigger: {
    trigger: ".section-s10",
    start: "top 250vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

/*SECTION 11*/
gsap.from(".section-s11 #containers11:nth-child(1)", {
  scrollTrigger: {
    trigger: ".section-s11",
    start: "top 40%",
    end: "+=10px",
    scroller: ".scrollContainer",
    scrub: true,
  },
  opacity: 0,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s11 #containers11:nth-child(2)", {
  scrollTrigger: {
    trigger: ".section-s11",
    start: "top 20%",
    end: "+=10px",
    scroller: ".scrollContainer",
    scrub: true,
  },
  opacity: 0,
  ease: "none",
  duration: 0.5,
});

gsap.to("#icons11", {
  duration: 1,
  opacity: 0.75,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
});

/*PEDAL ANIMATION*/
gsap.to(".hapticpedal", {
  duration: 0.05,
  y: 2,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
});

gsap.to(".haptictouchpbm", {
  duration: 0.05,
  x: 1.5,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
});

/*SECTION 12 TEXT*/
gsap.from(".section-s12 h1", {
  scrollTrigger: {
    trigger: ".section-s12",
    start: "top 500vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s12 p", {
  scrollTrigger: {
    trigger: ".section-s12",
    start: "top 250vh",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

/*SECTION 14 DOTS*/
gsap.from(".section-s14 h1", {
  scrollTrigger: {
    trigger: ".section-s14",
    start: "top 50%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

gsap.from(".section-s14 p", {
  scrollTrigger: {
    trigger: ".section-s14",
    start: "top 35%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  ease: "none",
  duration: 0.5,
  delay: 1,
});

gsap.to(["#firstwave", "#secondwave", "#thirdwave", "#fourthwave"], {
  duration: 0.75,
  opacity: 1,
  repeat: -1,
  stagger: 0.25,
  yoyo: true,
  ease: "sine.inOut",
});

/*SECTION 15*/
gsap.from(".section-s15 h1", {
  scrollTrigger: {
    trigger: ".section-s15",
    start: "top 50%",
    scroller: ".scrollContainer",
  },
  opacity: 0,
  y: 40,
  ease: "none",
  duration: 0.5,
});

// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();