How to pin nested elements on the website

[Chris_wiz]

Hi,

 

I'm following the Get started and video tutorial but can't seem to get it to work as expected. I would like to pin elements in the left column to the top and bottom of the viewport, while having the elements in the right column scroll with pinning at the same time? Can You point me with what I am doing wrong? Thank You for Your wonderful library btw. It adds a lot of fun element to the content.

 

index.html

See the Pen wvLmBEG by krzysztofmalina (@krzysztofmalina) on CodePen.

[mvaneijgen]

Hi @Chris_wiz welcome to the forum!

 

I'm not sure what you're asking, but is something like this what you're looking for. I highly recommend turning on the markers when working wit ScrollTrigger, so that you can see what it is doing. Hope it helps and happy tweening! 

 

See the Pen gONzmRE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Chris_wiz]

Hi @mvaneijgen!

 

Thank You for a prompt reply. Part of this is working as I would like to. I will work on it from the point You demonstrated. Is there any chance of having another element in left column sticked to the bottom of the viewport, like in the image?

 

When I turn the pin spacing on the .left_pinned gets unpinned somewhere in the middle of the right column. Why is that?

 

See the Pen wvLmBEG by krzysztofmalina (@krzysztofmalina) on CodePen.

 

See the Pen wvLmBEG by krzysztofmalina (@krzysztofmalina) on CodePen.

[mvaneijgen]

7 minutes ago, Chris_wiz said:

Is there any chance of having another element in left column sticked to the bottom of the viewport, like in the image?

I would create an element that houses both these pieces of text and make it 100%, then place the top one at the top and the bottom at the bottom and then pin that element.

 

8 minutes ago, Chris_wiz said:

When I turn the pin spacing on the .left_pinned gets unpinned somewhere in the middle of the right column. Why is that?

Pin spacing pushes everything that doesn't get pinned to the bottom of the page by how much you pin everything. 

[Chris_wiz]

Thank You! I will go the way You suggested