Framer Motion Sticky Horizontal Scroll Works On Desktop But Not Mobile

Question

So I'm trying to pull off a feature of my new portfolio site where you scroll down the page until you hit the portfolio, at which point it switches to horizontal scrolling until you're done with the portfolio.

This is working perfectly on Desktop but sometimes not at all on mobile, sometimes it won't work on the way down the page but will activate the sticky stuff on the way back up...

I'm getting ready to just get rid of this feature for mobile, but before I do that I figured I'd see if anyone has any advice. Here's the code for the sticky scroll component:

import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import styles from "./hor.module.css";
import Image from "next/image";

export default function Hor() {
  const horRef = useRef();
  const { scrollYProgress } = useScroll({ target: horRef });
  const x = useTransform(scrollYProgress, [0, 1], ["0%", "-90%"]);
  console.log("scroll", scrollYProgress);
  return (
    <div className={styles.outerHor} ref={horRef}>
      <div className={styles.hor}>
        <h1 className={styles.horHeading}>MY PORTFOLIO</h1>
        <motion.div
          style={{
            x,
            display: "flex",
            flexDirection: "row",
            justifyContent: "flex-start",
            position: "relative",
          }}
        >
          <div className={styles.portCard}>
            <Image
              src="/portImages/tradeIQlogo.png"
              width={200}
              height={200}
              className={styles.horLogo}
              alt="Trade IQ Logo"
            />
          </div>
          <div className={styles.portCard}>
            <Image
              src="/portImages/southStatelogo.png"
              width={200}
              height={145}
              className={styles.horLogo}
              alt="Trade IQ Logo"
            />
          </div>
          <div className={styles.portCard}>
            {" "}
            <Image
              src="/portImages/mauisBest.png"
              width={200}
              height={92}
              className={styles.horLogo}
              alt="Trade IQ Logo"
            />
          </div>
          <div className={styles.portCard}>
            <div
              style={{
                backgroundColor: "white",
                borderRadius: "5px",
                padding: ".5em 1em",
              }}
            >
              <Image
                src="/portImages/mantonChamber.png"
                width={200}
                height={88}
                className={styles.horLogo}
                alt="Trade IQ Logo"
              />
            </div>
          </div>
          <div className={styles.portCard}>
            <Image
              src="/portImages/buoys.png"
              width={200}
              height={70}
              className={styles.horLogo}
              alt="Trade IQ Logo"
            />
          </div>
          <div className={styles.portCard}>
            <Image
              src="/portImages/eliteAir.png"
              width={200}
              height={45}
              className={styles.horLogo}
              alt="Trade IQ Logo"
            />
          </div>
          <div className={styles.portCard}>
            {" "}
            <Image
              src="/portImages/westEndYouth.png"
              width={200}
              height={200}
              className={styles.horLogo}
              alt="Trade IQ Logo"
            />
          </div>
          <div className={styles.portCard}>
            <div
              style={{
                backgroundColor: "white",
                borderRadius: "5px",
                padding: ".5em 1em",
              }}
            >
              <Image
                src="/portImages/beeHealthy.png"
                width={300}
                height={46}
                className={styles.horLogo}
                alt="Trade IQ Logo"
              />
            </div>
          </div>
          <div className={styles.portCard}>
            <Image
              src="/portImages/bridgingGaps.png"
              width={200}
              height={94}
              className={styles.horLogo}
              alt="Trade IQ Logo"
            />
          </div>
          <div className={styles.portCard}>
            <div
              style={{
                backgroundColor: "white",
                borderRadius: "20px",
                padding: "1em",
              }}
            >
              <Image
                src="/portImages/tru.jpg"
                width={200}
                height={94}
                className={styles.horLogo}
                alt="Trade IQ Logo"
              />
            </div>
          </div>
          <div className={styles.portCard}>
            <Image
              src="/portImages/colin.png"
              width={200}
              height={125}
              className={styles.horLogo}
              alt="Trade IQ Logo"
            />
          </div>
          <div className={styles.portCard}>
            <Image
              src="/portImages/hiltonFarms.png"
              width={200}
              height={120}
              className={styles.horLogo}
              alt="Trade IQ Logo"
            />
          </div>
        </motion.div>
      </div>
    </div>
  );
}

And here's the applicable CSS. The parent component of Hor is relatively positioned.

.outerHor {
  height: 600vh;
  z-index: 3;
  position: relative;
  padding-top: 50px;
  text-align: center;
  margin-top: 100px;
  border-top: 10px dashed var(--background);
  border-bottom: 10px dashed var(--background);
  background-color: #2d4a7f;
}
.hor {
  position: sticky;
  top: 0;
  width: 300vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  margin-left: 2rem;
}
.horHeading {
  color: var(--textcolor);
  font-size: 4rem;
  /* text-shadow: 2px 2px 4px #333333; */
  margin-bottom: 2.5rem;
  position: absolute;
  margin-top: 0rem;
  top: 0;
  z-index: 5;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  background-color: #2d4a7f;
}
.portCard {
  height: 80vh;
  max-height: 600px;
  margin: 16px;
  max-width: 600px;
  width: 80vh;
  border-top: 5px solid #f3f3f3;
  border-right: 10px solid #f3f3f3;
  border-left: 10px solid #f3f3f3;
  border-bottom: 80px solid #f3f3f3;
  /* border-radius: 5px; */
  background-color: #2d4a7f;
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
}
.horLogo {
  position: relative;
}

@media screen and (max-width: 500px) {
  .horHeading {
    font-size: 3rem;
    -webkit-text-stroke-width: 0.5px;
    margin-left: 2rem;
  }
  .portCard {
    width: 80vw;
    max-height: 80vw;
  }
  .hor {
    margin-left: 0;
  }
}```