Pinned panel jumps out of its container after completion of animation

[clhomme]

Hello everyone!

 

So, I'm trying to do this animation with two sections side by side, and upon scrolling one of them scrolls normally (here it's the right one) while the other stays put/pinned until the end of the animation. I've applied this logic: 

 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

except vertically instead of horizontally and it works like a charm. My only issue is that the left panel (the pinned one), upon reaching the end, "jumps" onto the following section and stays there (I know it doesn't look like much in the codepen due to its low height, but it is much more obvious in my full-screen page. Imagine that this little jump the left panel does when you start scrolling goes way lower.). I think the issue lies in the "end" part of my scrollTrigger, but I've tried messing with it, like using values other than 1000 (still happens) or using "bottom bottom" (the right panel goes way too fast). Does anyone have an idea of what I'm doing wrong?

 

Thank you very much!

See the Pen RwezXrE by Dhandelyon (@Dhandelyon) on CodePen

[darkus]

To me, this looks like you are almost pinned that area twice?  I changed it to set the pin only one time for the main area, as it looks like you are animating the content in.  With this change I dont see the jump effect anymore

 

I added some area top and bottom for aesthetics to see how it could look in real life, see what you think
 

 

 

See the Pen vYVqovo by darkuss (@darkuss) on CodePen

 

[Rodrigo]

Hi,

 

You could check this example for some inspiration as well:

See the Pen NWMZrbj by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!