Scrubbing inside pinned element

[Hugo S.]

Hi,

I'm trying to achieve the following:

Have a 100vh section that should be pinned once it reaches the top of the screen (that much I'm able to do).

Inside the div there are two divs in a flex layout, each taking 50% of the width.

The left div should stay fixed (it's the section title/header). The right div content should scroll (while the parent is pinned) in a scrubbing fashion.

Once the right div content reaches the last element, the parent should be unpinned and normal scroll of the page should resume.

As a very recent arrival to the Greensock family I'm struggling with it. Is there any example of what I want to achieve you can direct me to?

Any help is truly appreciated.

Thanks in advance!

[ZachSaucier]

Hey hsombreireiro and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

Does the parent container have to be pinned? Nested pinning is messy at the least.

 

It sounds like you want something along the lines of this demo (found in the ScrollTrigger docs demo list):

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

 

Either way it'd be really helpful if you made a minimal demo for us to take a look at.

 

[Hugo S.]

That's a perfect baseline to get me started!

Thanks a bunch!