Untitled

(function ($) {
  $(document).ready(function () {
    gsap.registerPlugin(ScrollTrigger);

    /*    var lenis = new Lenis({
      duration: 1.2,
      easing: function (t) {
        return Math.min(1, 1.001 - Math.pow(2, -10 * t));
      },
    });

    function raf(time) {
      lenis.raf(time);
      ScrollTrigger.update();
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf); */

    /* Into animation: */
    var tl = gsap.timeline({
      onComplete: hideIntro,
      ease: "power2.out",
    });
    tl.to(".centered-svg", {
      keyframes: {
        "0%": { opacity: 0 },
        "50%": { opacity: 0.5 },
        "100%": { opacity: 1 },
      },
      duration: .1, // 3
    });
    tl.to(".bg-panel", { opacity: 0, duration: 2 }, ">");
    tl.to(
      ".new-panel",
      {
        opacity: 1,
        duration: .1,
        y: "-100%",
        onComplete: function () {
          AOS.init({
            // Global settings:
            disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
            startEvent: "DOMContentLoaded", // name of the event dispatched on the document, that AOS should initialize on
            initClassName: "aos-init", // class applied after initialization
            animatedClassName: "aos-animate", // class applied on animation
            useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
            disableMutationObserver: false, // disables automatic mutations' detections (advanced)
            debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
            throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)

            // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
            offset: 120, // offset (in px) from the original trigger point
            delay: 0, // values from 0 to 3000, with step 50ms
            duration: 1500, // values from 0 to 3000, with step 50ms
            easing: "ease-in-out", // default easing for AOS animations
            once: false, // whether animation should happen only once - while scrolling down
            mirror: false, // whether elements should animate out while scrolling past them
            anchorPlacement: "top-center", // defines which position of the element regarding to window should trigger the animation
          });
        },
      },
      "<"
    );
    tl.set(".intro-wrapper", { opacity: 0, duration: 1 });
    tl.to(
      ".new-panel",
      {
        opacity: 0,
        y: "-100%",
        duration: .1,
      }
    );

    // Function to hide the intro after the animation
    function hideIntro() {
      gsap.to(".intro-wrapper", {
        onComplete: function () {
          document.body.style.overflow = "auto";
          gsap.set(".intro-wrapper", { display: "none" });
        },
      });
    }

    /* Color changing: */

    // target elements
    var bigTextSection = document.getElementById("bigBodyText");
    var photoSliderSection = document.getElementById("photoSlider");
    var bigText = document.querySelector(".text-content h3");
    var headerMainSection = document.querySelector(
      "body > div.page-wrapper.bg > header > div > div.main-row.row > div"
    );
    var pageWrapper = document.querySelector(".page-wrapper");
    var mainRowWrapper = document.querySelector(
      ".header-desktop-container .main-row"
    );
    var navLinks = document.querySelectorAll("a.nav-link");
    var navButton = document.querySelector(
      "body > div.page-wrapper.bg > header > div > div.main-row.row > div > div.nav-content > div > div > button"
    );
    var searchIcon = document.querySelector(
      "body > div.page-wrapper.bg > header > div > div.main-row.row > div > div.nav-content > div > form > label > svg > path"
    );
    var link = document.querySelector(
      "#bigBodyText > div > div.row.start > div > a"
    );
    var button = document.querySelector(
      "#bigBodyText > div > div.row.start > div > button"
    );
    var separator = document.getElementById("main-row-separator");
    var ourCommunityInActionText = document.querySelector(
      ".photo-slider-title"
    );
    var iconControlLeft = document.querySelector(
      ".photo-slider-icon-control-left > path"
    );
    var iconControlRight = document.querySelector(
      ".photo-slider-icon-control-right > path"
    );

    var originalColors = {
      headerMainSection: "#e4e3d9",
      pageWrapper: "#e4e3d9",
      bigText: "#1f2626",
      separator: "#1f2626",
      searchIcon: "#1f2626",
      ourCommunityInActionText: "#1f2626",
      iconControlLeft: "#1f2626",
      iconControlRight: "#1f2626",
    };
    var originalClasses = {
      button: "button-primary-dark",
      navButton: "nav-button-class",
    };

    // color change
    var colorChangeTimeline = gsap
      .timeline()
      .to(headerMainSection, { backgroundColor: "#1f2626" }, 0)
      .to(pageWrapper, { backgroundColor: "#1f2626" }, 0)
      .to(bigText, { color: "#f9f8f3" }, 0.5)
      .to(separator, { backgroundColor: "#f9f8f3" }, 0)
      .to(searchIcon, { fill: "#f9f8f3" }, 0)
      .to(button, { className: "button-primary-light" }, 0.5)
      .to(link, { className: "link rollingText" }, 0.5)
      .to(navButton, { className: "button-nav-light" }, 0.5)
      .to(navLinks, { className: "nav-link-light" }, 0.5)
      .to(ourCommunityInActionText, { color: "#f9f8f3" }, 0)
      .to(iconControlLeft, { fill: "#f9f8f3" }, 0)
      .to(iconControlRight, { fill: "#f9f8f3" }, 0);

    // Set the initial state of the elements
    gsap.set(headerMainSection, {
      backgroundColor: originalColors.headerMainSection,
    });
    gsap.set(pageWrapper, { backgroundColor: originalColors.pageWrapper });
    gsap.set(bigText, { color: originalColors.bigText });
    gsap.set(separator, { backgroundColor: originalColors.separator });
    gsap.set(searchIcon, { fill: originalColors.searchIcon });
    gsap.set(ourCommunityInActionText, {
      color: originalColors.ourCommunityInActionText,
    });
    gsap.set(iconControlLeft, { fill: originalColors.iconControlLeft });
    gsap.set(iconControlRight, { fill: originalColors.iconControlRight });
    button.classList.add(originalClasses.button);
    link.classList.add(originalClasses.link);
    navButton.classList.add(originalClasses.navButton);
    navLinks.forEach(function (navLink) {
      navLink.classList.remove("nav-link-light");
    });

    var combinedHeight =
      bigTextSection.offsetHeight + photoSliderSection.offsetHeight;

    ScrollTrigger.create({
      trigger: bigTextSection,
      start: "top center",
      end: "center+=" + combinedHeight + " center",
      animation: colorChangeTimeline,
      onEnter: function () {
        colorChangeTimeline.play();
      },
      onLeave: function () {
        colorChangeTimeline.reverse();
      },
      onEnterBack: function () {
        colorChangeTimeline.play();
      },
      onLeaveBack: function () {
        colorChangeTimeline.reverse();
      },
      markers: true
    });

    /* Community section animation */

    var horizontalSection = document.getElementById("community");
    var horizontalItem = document.querySelector(".horizontal-item");

    function getScrollAmount() {
      var itemWidth = horizontalItem.scrollWidth;
      return -(itemWidth - window.innerWidth);
    }

    var tween = gsap.to(horizontalItem, {
      x: getScrollAmount,
      duration: 3,
      ease: "none",
    });

    var mm = gsap.matchMedia();
    mm.add("(min-width: 768px)", function () {
      ScrollTrigger.create({
        trigger: horizontalSection,
        start: "-115 top",
        end: function () {
          return "+=" + getScrollAmount() * -1; /*  + 500 */
        },
        pin: true,
        animation: tween,
        snap: false,
        scrub: 1,
        invalidateOnRefresh: true,
      });
    });
  });
})(jQuery);