Using ScrollTrigger to scroll down on a list on the left and change the content on the right

So, I’m trying to figure out how to scroll down the list of names on the left and as I do, the content on the right changes. It would change back as I’m scrolling back up as well. I would be looking to scroll in the middle of the viewport as well, which is why I’m having an issue. I dont quite understand how to do that.
This works only when I click because each list item is actually a radio button. Here is my code:

<section class="wrapper mx-5 md:mx-36 team-memers">
 <div class="team-members__title">
     <h1 class="text-black font-saria mt-9"><?php echo $title?></h1>
 </div>

 <div id="scene" class="scene">
     <div id="left-zone">
         <ul class="list">
             <?php $i = 0;?>
             <?php foreach($teamMembers as $teamMember) {; $i++?>
             <li class="item" id="section">
                 <?php if ($i == 1) { ?>
                 <input id="radio_<?php echo $i?>" type="radio" value="<?php echo $i?>" name="basic_carousel"
                     checked="checked">
                 <?php   } else { ?>
                 <input id="radio_<?php echo $i?>" type="radio" value="<?php echo $i?>" name="basic_carousel">
                 <?php  } ?>
                 <label class="label_<?php echo $i?>" for="radio_<?php echo $i?>"> <?php echo $teamMember['name']?>
                 </label>
                 <div class="content content_<?php echo $i?>">
                     <div class="picto" style="background-image: url(<?php echo $teamMember['image']['url'] ?>)">
                     </div>
                     <h1><?php echo $teamMember['name']?></h1>
                 </div>
             </li>
             <?php }?>
         </ul>
     </div>
     <div id="middle-border"></div>
     <div id="right-zone"></div>
 </div>

I dont have any Javascript, this is purely CSS

$menu-width: 350px;
$scene-width: 1000px;
$scene-height: 400px;



@keyframes slidein {
0% {
    top: -$scene-height;
    opacity: 0;
}

100% {
    opacity: 1;
    top: 0px;
}
}

@keyframes slideout {
0% {
    top: 0;
    opacity: 1;
}

   100% {
    top: -$scene-height;
    opacity: 0;
}
 }

::scrollbar {
display: none;
  }


#scene {
display: flex;
align-items: center;
justify-content: left;

width: $scene-width;
height: $scene-height;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: get-color(white);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
overflow: hidden;

#left-zone {
    background: get-color(white);
    height: 75%;
    flex-grow: 0;
    display: flex;
    width: $menu-width;
    align-items: center;
    justify-content: left;

    .list {
        display: flex;
        list-style: none;

        align-content: stretch;
        flex-direction: column;
        flex-grow: 1;

        margin: 0;
        padding: 0;

        li.item {

            input[type="radio"] {

                display: none;

                &~label {
                    display: block;
                    opacity: 0.5;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    color: #000;

                    &:first-letter {
                        text-transform: uppercase;
                    }

                    &:hover {
                        opacity: 0.75;
                        cursor: pointer;
                    }

                    &:before {
                        content: " ";
                        display: block;
                        position: absolute;
                        width: 50px;
                        height: 50px;
                        margin-left: 15px;
                        background-image: url('https://d30y9cdsu7xlg0.cloudfront.net/png/83067-200.png');
                        background-position: center;
                        background-size: 75% 75%;
                        background-repeat: no-repeat;
                    }
                }

                &~.content {
                    position: absolute;
                    left: $menu-width;
                    top: -$scene-height;
                    width: $scene-width - $menu-width;
                    height: $scene-height;

                    animation-duration: 0.75s;
                    animation-name: slideout;
                    animation-timing-function: ease-out;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;

                    .picto {
                        height: 100px;
                        width: 100px;
                        background-image: url('https://d30y9cdsu7xlg0.cloudfront.net/png/83067-200.png');
                        background-position: center;
                        background-size: cover;
                        background-repeat: no-repeat;
                    }

                    h1 {
                        color: limegreen;
                    }



                    h1 {
                        &:first-letter {
                            text-transform: uppercase;
                        }
                    }

                    p {
                        max-width: 50%;
                        text-align: center;
                    }
                }

                &:checked {
                    &~label {
                        opacity: 1;
                        animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
                        color: limegreen;
                        border-right: solid 4px limegreen;

                    }

                    &~.content {
                        animation-duration: 0.75s;
                        animation-name: slidein;
                        animation-fill-mode: forwards;
                        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
                    }
                }
            }
        }
    }
}

#middle-border {
    background-color: get-color(gray);
    height: 75%;
    flex-grow: 1;
    max-width: 2px;
    z-index: 0;
}

#right-zone {
    background: get-color(white);
    height: 100%;
    flex-grow: 3;
}

}