Pin problem

[ilyasseisov]

Good day! 👋

 

Could you please take a look a simple Pen:

 

I don't understand why the image gets out its container?

How do I pin it in place until the animation is finished?

 

Thanks in advance! 

See the Pen abPvyWJ by jssecrets (@jssecrets) on CodePen

[Carl]

Thanks for the clear demo.

 

the image is in content. I gave content a red background. content appears to be pinned correctly. I extended the end value so there is more time to scroll

 

See the Pen vYvNJRa by snorkltv (@snorkltv) on CodePen

 

 

perhaps you meant to pin the purple section? or maybe I'm misunderstanding the issue.

[ilyasseisov]

Hi 👋

Quote

Perhaps you meant to pin the purple section?

Yes.

 

Can you help with this?

[ilyasseisov]

17 minutes ago, Carl said:

Thanks for the clear demo.

 

the image is in content. I gave content a red background. content appears to be pinned correctly. I extended the end value so there is more time to scroll

 

 

 

 

 

Quote

perhaps you meant to pin the purple section?

yes.

 

[Carl]

This was a little tricky due to how you were applying your css.

 

when you pin elements they get wrapped in a pinSpacer div. this messes up your nth-of-type selectors.

so once the second section got pinned, it no longer had height auto. now the 3rd section is the 2nd that gets selected with

 

section:nth-of-type(2) {
  background: #8c75fe;
  height: auto;
}

 

I added inline styles to each section so you can now see what's happening.

the second section has the class of .pinMe and is working as expected.

 

See the Pen qBLOPdy?editors=1100 by snorkltv (@snorkltv) on CodePen

[ilyasseisov]

Thank you!

But there is a white space that appears from somewhere and the purple section moves inside of it.

I've attached the image.

 

Is it possible not to have it?

Can the purple section be fixed in place until image is done moving?

 

 

[Carl]

The white space is caused by the pin-spacer. this creates the necessary scroll distance for the user to continue scrolling while the elements are pinned. Please see the docs for my pinSpacing video https://greensock.com/docs/v3/Plugins/ScrollTrigger (which is also in ScrollTrigger Express)

 

1 hour ago, ilyasseisov said:

Can the purple section be fixed in place until image is done moving?

Yes, and it is fixed in place in the demo above as that is the one that is being pinned. Do you see it moving?

 

When dealing with pinning, I've found for the best visual result you can just give the pinned element a height of 100vh. This way you don't see what's happening above or below as the page is scrolling:

 

See the Pen RwEWjMV by snorkltv (@snorkltv) on CodePen

 

Another option is to put the section that comes after the pinned element inside the pinned element. So in your case take the last section and put it in the pinned section.

 

Another option is to explore giving surrounding elements or the body the same background color so you don't notice a gap.

you can also style the pin-spacer with

 

.pin-spacer {
  background:green;
}

 

Also, ScrollTrigger Express has a "Pinning Deep Dive" lesson (members only) that shows more about pinning too.

 

 

 

[ilyasseisov]

Thank you very much Carl!

It helped! 👍