Snippits from Katarina-website

assignNumberToElement.js

// Numbering projekcts. This should probably just have been a numberes list element
const projects = document.querySelectorAll(".number-wrapper");
let number = 1;
projects.forEach((project) => {
  project.innerHTML = `<h2 class="regular allcaps">${number}</span>`;
  number += 1;
});

evenColumns.js

//Devide elements evenly between two columns
const listItems = document.querySelectorAll(".project-list-item");
const placeItems = () => {
  listItems.forEach((item, index) => {
    if (window.matchMedia("(max-width: 991px)").matches) {
      document.getElementById("left-column").appendChild(item);
    } else {
      if (index >= listItems.length / 2) {
        document.getElementById("right-column").appendChild(item);
      } else {
        document.getElementById("left-column").appendChild(item);
      }
    }
  });
  console.log("Resized")
};
placeItems()

window.addEventListener("resize", placeItems);

HorizontalScrollCMSOne.html

<!--  CMS vertical scroll based on width of individual image in gallery, Ends on the last one -->
<style>
    .horizontal-trigger {
        height: calc(100% - 100vh);
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script>

    gsap.registerPlugin(ScrollTrigger);

    let horizontalItem = document.querySelectorAll(".gallery-item");
    let horizontalSection = $("#track");
    let moveDistance;
    function calculateScroll() {
        // Desktop
        let itemsInView = 1;
        let scrollSpeed = 1;

        //calculating outerwidth for each
        let horizontalItemWidth = 0;
        let lastItem = horizontalItem[horizontalItem.length - 1]
        horizontalItem.forEach(element => {
            horizontalItemWidth += element.offsetWidth
            console.log(element.offsetWidth)
        });

        if (window.matchMedia("(max-width: 479px)").matches) {
            // Mobile Portrait
            itemsInView = 1;
            scrollSpeed = 1;
        } else if (window.matchMedia("(max-width: 767px)").matches) {
            // Mobile Landscape
            itemsInView = 1;
            scrollSpeed = 1;
        } else if (window.matchMedia("(max-width: 991px)").matches) {
            // Tablet
            itemsInView = 1;
            scrollSpeed = 1;
        }
        let moveAmount = horizontalItem.length - itemsInView;
        let minHeight = scrollSpeed * horizontalItemWidth;
        if (moveAmount <= 0) {
            moveAmount = 0;
            minHeight = 0;
            // horizontalSection.css('height', '100vh');
        } else {
            horizontalSection.css("height", "200vh");
        }

        moveDistance = (horizontalItemWidth - lastItem.offsetWidth);
        horizontalSection.css("min-height", minHeight + "px");
    }
    calculateScroll();
    window.onresize = function () {
        calculateScroll();
    };

    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: ".horizontal-trigger",
            // trigger element - viewport
            start: "top top",
            end: "bottom top",
            invalidateOnRefresh: true,
            scrub: 0.3
        }
    });
    tl.to("#track .gallery-wrapper", {
        x: () => -moveDistance,
        duration: 1
    });

</script>

squeezeImageHorizontalScroll.js

let frames = document.querySelectorAll(".image-frame");
const crop = 50;
window.addEventListener("scroll", function () {
  frames.forEach((element) => {
    let rect = element.getBoundingClientRect();
    if ((rect.left < -crop) & (rect.left > 0 - rect.width - crop)) {
      element.querySelector(".image").style.transform = `scale3d(${
        (element.offsetWidth + (element.getBoundingClientRect().left + crop)) /
        element.offsetWidth
      }, 1, 1)`;
    } else {
      element.querySelector(".image").style.transform = "scale3d(1,1,1)";
    }
  });
});