1. write an event.listener for the scroll of the page (the tag that holds all the text) using useRef in react-hooks

2. find the y-axis value of the ref you just created where you want to stop scrolling.

3. have state that holds the percentages, and a state for the y-axis the user is now.

4. when the percentages aren't 100 and the desired y-axis value of the current ref is reached, stop the scroll for the ref you defined earlier.

5. when percentages changed to 100, or the user scroll back up, (which means current y-axis is smaller than stopping point) allow scroll again.

You can use CSS to do that!

scroll-snap-stop is part of the CSS Scroll Snap Module. Scroll snapping refers to “locking” the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.

scroll-snap-stop allows you to force the scroll-snapping container to snap to a particular element. Suppose you were scrolling within a scroll-snapping container, and you gave it a giant spin-of-the-mousewheel. Normally, the browser would let the velocity of your scrolling fly past snap points until it settled on a snap point close to where the scrolling would normally end. By setting scroll-snap-stop you can tell the browser that it must stop on a particular element before allowing the user past it.

You can check more info --> scroll-snap-stop (css-tricks.com)

You can use standard Gsap ScrollTrigger to achieve the desired result on https://circleci.com .
Demo on codesandbox

import React, { useRef, useEffect, useState } from "react";
import "./styles.css";

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

export default function App() {
  const ref = useRef(null);
  const [progress, setProgress] = useState(0);
  const [tween, setTween] = useState(null);

  useEffect(() => {
    if (tween) return;

    gsap.registerPlugin(ScrollTrigger);
    let scrollTween = gsap.to(ref.current, {
      ease: "none",
      backgroundColor: "#DAF7A6",
      scrollTrigger: {
        trigger: ref.current,
        pin: true,
        anticipatePin: 1,
        invalidateOnRefresh: true,
        refreshPriority: 1,
        start: "top 0%",
        end: "+=300%",
        markers: false,
        toggleActions: "play reset play reset",
        onUpdate: (self) => {
          let p = (self.progress * 100).toFixed(1);
          setProgress(p);
        }
      }
    });

    setTween(scrollTween);
  }, []);

  return (
    <div className="App">
      <div className="top">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>{" "}
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
      <div ref={ref} id="hscroll">
        <h1>
          When the scroll arrive this div, the position of this div will become
          sticky, and the percentage will start to increase from 0 to 100. When
          arriving 100%, user can then scroll to next section
        </h1>
        <h2 id="output">{`Percentage scrolled: ${progress}%.`}</h2>
      </div>
      <div className="bottom">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </div>
  );
}