external.js

(function ($) {
  // External tools and plugis JS
  gsap.registerPlugin(ScrollTrigger); // Register plugin so you can use defauls
  gsap.registerPlugin(MotionPathPlugin);

  ScrollTrigger.defaults({ // Defaults are used by all ScrollTriggers
    toggleActions: "restart pause reverse pause", // Scoll effect Forward, Leave, Back, Back Leave
    markers: true // Easaly remove markers for production
  });

  const d = 0.3;

  function timelineHeaderFnc(elemnt) {
    const timeline = gsap.timeline();

    timeline
      .from(elemnt, { x: -100, ease: "back", stagger: { each: 0.2, } })
      .from(elemnt, { opacity: 0, stagger: { amount: 0.6, } }, "<");

    return timeline;
  }

  window.addEventListener("load", function () {
    //------------------------------------------------------//
    // 👷‍♂️ Header
    //------------------------------------------------------//
    if (document.querySelector("#alloy-header .overlay")) {
      const headerSplitText = new SplitText("#alloy-header .inner .alloy-title", { type: "lines" });
      const headerLines = headerSplitText.lines; //an array of all the divs that wrap each character

      const timelineHeader = gsap.timeline({
        // repeat: -1, repeatDelay: 1
      });


      timelineHeader
        .from("#alloy-header .overlay .overlay-background", { duration: d, opacity: 0, xPercent: -100 })
        .to("#alloy-header .overlay .overlay-background", { duration: d, skewX: "-10deg", ease: "back" }, "+=0.3")
        .add(timelineHeaderFnc(headerLines), "-=0.3")
        .add(timelineHeaderFnc("#alloy-header .inner .btn"), "-=0.1");

    }
    // END 👷‍♂️ Header  -------------------------------------//


    //------------------------------------------------------//
    // 🏠 Housing shortage
    //------------------------------------------------------//
    if (document.querySelector("#graph-housing-shortage-graph")) {
      const timelineHousing = gsap.timeline({
        scrollTrigger: {
          id: "HOUSE", // Custom label to the marker
          trigger: "#graph-housing-shortage-graph", // What element triggers the scroll
          scrub: 0.5, // Add a small delay of scrolling and animation. `true` is direct
          start: "center center", // Start at top of Trigger and at the top of the viewport
          end: "+=500 center", // The element is 500px hight and end 50px from the top of the viewport
          pin: true
        }
      });
      const number = document.querySelector('#graph-housing-shortage-graph #number');
      timelineHousing
        .set([
          "#graph-housing-shortage-graph #needed",
          "#graph-housing-shortage-graph #current",
          "#graph-housing-shortage-graph #end1",
          "#graph-housing-shortage-graph #end",
        ], { autoAlpha: 1 })
        // .set("", { opacity: 1 })
        .from("#graph-housing-shortage-graph #line-base", { drawSVG: "0%" }, "sameTime")
        .from("#graph-housing-shortage-graph #line-needed", { drawSVG: "0%" }, "sameTime")
        .to("#graph-housing-shortage-graph #end", { motionPath: { path: "#line-needed", align: "#line-needed", autoRotate: false, alignOrigin: [0.5, 0.5] } }, "sameTime")
        .to("#graph-housing-shortage-graph #needed", { motionPath: { path: "#line-needed", align: "#line-needed", autoRotate: false, alignOrigin: [0.5, 2] } }, "sameTime")
        .to("#graph-housing-shortage-graph #end1", { motionPath: { path: "#line-base", align: "#line-base", autoRotate: false, alignOrigin: [0.5, 0.5] } }, "sameTime")
        .to("#graph-housing-shortage-graph #current", { motionPath: { path: "#line-base", align: "#line-base", autoRotate: false, alignOrigin: [0.5, -0.7] } }, "sameTime")
        .to({ animateMyNumber: 0 }, {
          animateMyNumber: 4590379,

          roundProps: "animateMyNumber",
          // ease: "power4.in",
          onUpdate: function () {
            number.innerHTML = this._pt.t.animateMyNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          }
        }, "sameTime");
    }
    // END 🏠 Housing shortage -------------------------------------//

    //------------------------------------------------------//
    // 🌍 World map
    //------------------------------------------------------//
    function distributeByPosition(vars) {
      var ease = vars.ease,
        from = vars.from || 0,
        base = vars.base || 0,
        axis = vars.axis,
        ratio = { center: 0.5, end: 1, edges: 0.5 }[from] || 0,
        distances;
      return function (i, target, a) {
        var l = a.length,
          originX, originY, x, y, d, j, minX, maxX, minY, maxY, positions;
        if (!distances) {
          distances = [];
          minX = minY = Infinity;
          maxX = maxY = -minX;
          positions = [];
          for (j = 0; j < l; j++) {
            d = a[j].getBoundingClientRect();
            x = (d.left + d.right) / 2; //based on the center of each element
            y = (d.top + d.bottom) / 2;
            if (x < minX) {
              minX = x;
            }
            if (x > maxX) {
              maxX = x;
            }
            if (y < minY) {
              minY = y;
            }
            if (y > maxY) {
              maxY = y;
            }
            positions[j] = { x: x, y: y };
          }
          originX = isNaN(from) ? minX + (maxX - minX) * ratio : positions[from].x || 0;
          originY = isNaN(from) ? minY + (maxY - minY) * ratio : positions[from].y || 0;
          maxX = 0;
          minX = Infinity;
          for (j = 0; j < l; j++) {
            x = positions[j].x - originX;
            y = originY - positions[j].y;
            distances[j] = d = !axis ? Math.sqrt(x * x + y * y) : Math.abs((axis === "y") ? y : x);
            if (d > maxX) {
              maxX = d;
            }
            if (d < minX) {
              minX = d;
            }
          }
          distances.max = maxX - minX;
          distances.min = minX;
          distances.v = l = (vars.amount || (vars.each * l) || 0) * (from === "edges" ? -1 : 1);
          distances.b = (l < 0) ? base - l : base;
        }
        l = (distances[i] - distances.min) / distances.max;
        return distances.b + (ease ? ease.getRatio(l) : l) * distances.v;
      };
    }
    if (document.querySelector("#graph-world-map")) {
      const timelineWorld = gsap.timeline({
        scrollTrigger: {
          id: "WORLD", // Custom label to the marker
          trigger: "#graph-world-map", // What element triggers the scroll
          //  0.5, // Add a small delay of scrolling and animation. `true` is direct
          start: "center center", // Start at top of Trigger and at the top of the viewport
          end: "bottom center", // The element is 500px hight and end 50px from the top of the viewport
          // pin: true
          toggleActions: "play complete complete complete", // Scoll effect Forward, Leave, Back, Back Leave
        }
      });
      timelineWorld
        .set("#alloy-world-map", { opacity: 1 })
        .from("#alloy-world-map polygon", {
          scale: 0,
          y: 20,
          ease: "back.out(2)",
          transformOrigin: "center center",
          stagger: distributeByPosition({
            from: "center",
            amount: 2
          })
        });
    }
    // END 🌍 World map -------------------------------------//

    //------------------------------------------------------//
    // 🟠 Four M
    //------------------------------------------------------//
    if (document.querySelector("#graph-four-m")) {
      const timelineFourm = gsap.timeline({
        scrollTrigger: {
          id: "FOUR-M", // Custom label to the marker
          trigger: "#graph-four-m", // What element triggers the scroll
          scrub: 0.5, // Add a small delay of scrolling and animation. `true` is direct
          start: "center center", // Start at top of Trigger and at the top of the viewport
          end: "center+=200% center", // The element is 500px hight and end 50px from the top of the viewport
          pin: true,
          // snap: {
          //   snapTo: "labels", // snap to the closest label in the timeline
          //   // duration: { min: 0.2, max: 3 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
          //   duration: 0.2, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
          //   // delay: 0.2, // wait 0.2 seconds from the last scr
          //   // ease: "power1.inOut" // the ease of the snap animati
          // }
        }
      });

      timelineFourm
        .set("#graph-four-m #venn", { xPercent: 80, transformOrigin: "center center" })
        .from("#graph-four-m #venn", { yPercent: "100", opacity: 0 })
        .from("#graph-four-m #venn g circle", { scale: 0, transformOrigin: "center center", stagger: { amount: 0.2 } })
        .from("#graph-four-m #venn g text", { y: 50, opacity: 0, stagger: { amount: 0.1 } })
        .add("vennDone")
        .add(function () { }, "+=2")
        .to("#graph-four-m #venn", { xPercent: "0", ease: "power1.in" })
        .from("#graph-four-m #list rect", { scaleY: 0 })
        .from("#graph-four-m #list #text text", { x: 50, opacity: 0, stagger: { amount: 1.5, ease: "power1.out" } }, "-=0.6")
        .from("#graph-four-m #list #highlight", { scaleX: 0 })
        .add("highlightDone")
        .add(function () { }, "+=2")
        .to("#graph-four-m #list #text #text-dev", { attr: { y: 69.5 } }, "sameTime")
        .to("#graph-four-m #list #text #text-factory", { attr: { y: 108 } }, "-=0.45")
        .to("#graph-four-m #list #text #text-data", { attr: { y: 146.5 } }, "-=0.45")
        .to("#graph-four-m #list #text #text-build", { attr: { y: 185 } }, "-=0.45")
        .to("#graph-four-m #list #text .move", { y: 154, stagger: { amount: 0.5, from: "end" } }, "sameTime")
        .to("#graph-four-m #list #highlight", { y: -273 }, "sameTime")
        .add("moveDone")
        .add(function () { }, "+=2")
        .to("#graph-four-m #list #highlight", { attr: { height: 505 } })
        .add(function () { }, "+=1")
        ;

    }
    // END 🟠  Four M -------------------------------------//

    //------------------------------------------------------//
    // 3️⃣ Blocks
    //------------------------------------------------------//
    function blocksScroll(container) {
      const item = gsap.utils.toArray(container.querySelectorAll(".alloy-item"));
      const timeline = gsap.timeline({
        scrollTrigger: {
          id: "BLOCKS", // Custom label to the marker
          // trigger: $(this), // What element triggers the scroll
          trigger: container, // What element triggers the scroll
          scrub: 0.5, // Add a small delay of scrolling and animation. `true` is direct
          start: "start+=200px center", // Start at top of Trigger and at the top of the viewport
          end: "start+=400px center", // The element is 500px hight and end 50px from the top of the viewport
          // pin: true,
        }
      });

      timeline.from(item, {
        opacity: 0,
        y: 100,
        stagger: {
          each: 0.2
        }
      });

      return timeline;
    }
    document.querySelectorAll(".ACF-team_grid").forEach(function (container) {
      blocksScroll(container);
    });
    document.querySelectorAll(".ACF-research_grid").forEach(function (container) {
      blocksScroll(container);
    });

    // END 3️⃣ Blocks -------------------------------------//
    //------------------------------------------------------//
    // 💬 Quote
    //------------------------------------------------------//
    function splitWords(element) {
      const myText = new SplitText(element, { type: "lines" });
      const myTextSplit = myText.lines; //an array of all the divs that wrap each character

      const timeline = gsap.timeline();

      timeline
        .from(myTextSplit, { x: -100, ease: "back", stagger: { each: 0.2, } })
        .from(myTextSplit, { opacity: 0, stagger: { amount: 0.6, } }, "<");

      return timeline;
    }
    if (document.querySelector(".ACF-quote_special")) {


      const timelineQuoteSpecial = gsap.timeline({
        scrollTrigger: {
          id: "QUOTE", // Custom label to the marker
          trigger: '.ACF-quote_special', // What element triggers the scroll
          scrub: 0.5, // Add a small delay of scrolling and animation. `true` is direct
          start: "start center", // Start at top of Trigger and at the top of the viewport
          end: "+=70% center", // The element is 500px hight and end 50px from the top of the viewport
          // pin: true,
        }
      });

      timelineQuoteSpecial
        .add(splitWords(document.querySelector('.ACF-quote_special .top.small')))
        .add(splitWords(document.querySelector('.ACF-quote_special .top.large')), '-=0.3')
        .add(splitWords(document.querySelector('.ACF-quote_special .bottom.small')), '-=0.3')
        .add(splitWords(document.querySelector('.ACF-quote_special .bottom.large')), '-=0.3');

    }
    if (document.querySelector(".ACF-quote")) {


      const timelineQuote = gsap.timeline({
        scrollTrigger: {
          id: "QUOTE", // Custom label to the marker
          trigger: '.ACF-quote', // What element triggers the scroll
          scrub: 0.5, // Add a small delay of scrolling and animation. `true` is direct
          start: "start center", // Start at top of Trigger and at the top of the viewport
          end: "+=70% center", // The element is 500px hight and end 50px from the top of the viewport
          // pin: true,
        }
      });

      timelineQuote
        .from('.ACF-quote .alloy-icons', { x: -100, opacity: 0 })
        .add(splitWords(document.querySelector('.ACF-quote blockquote p')));

    }
    // END 💬 Quote -------------------------------------//

  }, false);

  // Scroll down animation
  if ($('#scrollToContent')) {
    gsap.to('#scrollToContent', {
      y: -20,
      yoyo: true,
      duration: 0.6,
      delay: 7,
      repeat: -1,
    });
  }
})(jQuery); // Fully reference jQuery after this point.