Gsap Pinning Makes the pinned area to jump weirdly. Help needed

[Vijay gopal]

I am trying a very simple animation of Gsap. With pin enabled. The design works perfectly in PC, and when open in Mobile, the pinned are jumps abnormally down, I tried increasing decreasing the star, end with all combinations, it only gets worse. Please help. I am describing the problem with screenshot below:

 

I have actually Pinned the containing div of that h2 tab visible on screenshot,  it goes up and in i have given the start as "0% 12%". First of all the marker should have been above the h2 tag, as I have given 0% but it's below the tag. And secondly after the marker reaches the start position, it suddenly makes a jump by coming down to the position in the following screenshot.

 

I have also tried removing all the margins on the container and the container above, but still no luck. What is this problem? Someone please help me fix this.

The Same Problem can also be seen in the codepen I have attached, Resize the screen to something near to 300px wide, and see how the h2 jumps place after getting pinned.

See the Pen VwNNqbN by vijaygopal97 (@vijaygopal97) on CodePen

[GreenSock]

I don't have much time to dig deeply, but this seems problematic to me: 

tl.to(".rounded-wrapper",{
   height:0, // <-- you're altering the layout!
})

You've got a ScrollTriggered animation that's suddenly shifting the height of an element above that spot which alters the layout. I wonder why you're doing that. Once I removed that, it seemed to pin without the jump...right? So basically it seems like a logic issue in the way you're altering things. It's collapsing the layout.