how to make an element position fixed with scrolltrigger gsap?

I have a container that has two divs with a width of 50% each, and the alignment is how I want it to be when the scroll trigger isn't active, but when the scroll trigger is active, I wanna make the left div's position fixed and the right div to be in its place, but the right div is jumping on top of the left div, how to stop it from jumping on others and make it be in its own place?

gsap.registerPlugin(ScrollTrigger);

const tlfour = gsap.timeline({
    scrollTrigger: { 
        trigger: ".main-div", 
        start: "top",
        end: "+=40%",
      scrub: 1,
    markers: true,
    pin: true,
    }
})

tlfour.to(".left", {
    position: 'fixed',
  top: 0,  
})

body {
    height: 300vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-div {
    width: 100%;
    height: 140vh;
    position: relative;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.left {
    width: 50%;
    height: 100%;
}

.content {
    float: left;
    width: 100%;
    height: 120vh;
    background-color: black;
    position: relative;
}

.content p {
    color: white;
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(-0%, -50%);
}

.right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.r-content {
    float: right;
    width: 100%;
    height: 120vh;
    overflow: hidden;
    background-color: yellow;
    z-index: 5;
}

<body>
    <section class="main-div">
        <div class="wrapper">
            <div class="left">
                <div class="content"><p>test</p></div>
            </div>
            <div class="right">
                <div class="r-content"></div>
            </div>
        </div>
    </section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

Solution

creating a new layer inside 'left' div, and targeting that new layer with the position property of sticky and removing the srub property from scrolltrigger does the job!

gsap.registerPlugin(ScrollTrigger);

const tlfour = gsap.timeline({
    scrollTrigger: { 
        trigger: ".main-div", 
        start: "top",
        end: "+=40%",
        markers: true,
        pin: true,
    }
})

/*new content*/

tlfour.to(".left-wrapp", {
    position: 'sticky',
    top: 0,  
})

body {
    height: 300vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-div {
    width: 100%;
    height: 140vh;
    position: relative;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.left {
    width: 50%;
    height: 100%;
}

.content {
    float: left;
    width: 100%;
    height: 120vh;
    background-color: black;
    position: relative;
}

.content p {
    color: white;
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(-0%, -50%);
}

.right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.r-content {
    float: right;
    width: 100%;
    height: 120vh;
    overflow: hidden;
    background-color: yellow;
    z-index: 5;
}

<body>
    <section class="main-div">
        <div class="wrapper">
            <div class="left">
                
                <!--new content-->
                <div class="left-wrapp">
                  <div class="content"><p>test</p></div>
                </div>
                
            </div>
            <div class="right">
                <div class="r-content"></div>
            </div>
        </div>
    </section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>