On scroll second section is going beneath first section

[Dipit Maurya]

Hi, 

I am trying to accomplish this animation using scrolltrigger, but there is some weird space below the first section. I added pinSpacer: false and now, weird space is gone but second section is going beneath the first section. I dont what that to happen.. 

 

thanks

See the Pen mdwKNyv by konnectdipit (@konnectdipit) on CodePen

[akapowl]

Hi Dipit,

 

If you don't want the white-space (which is the spacing added by the pin-spacer) showing when pinning things like that, you'd want to consider wrapping all your content in a div and pinning this wrapping div instead.

 

See the Pen 954ea945a4ec2db0f6aa8c35168c6f15 by akapowl (@akapowl) on CodePen

 

 

For any subsequent ScrollTriggers on elements within that wrapping div, you will then need to set the pinnedContainer property to that pinned wrap, as they won't have any pinSpacing to consider for their positioning (because they are inside the pinSpacer of the pin you created before) and thus will not get the correct values as you might expect, otherwise.

 

Hope that helps  

[Dipit Maurya]

36 minutes ago, akapowl said:

Hi Dipit,

 

If you don't want the white-space (which is the spacing added by the pin-spacer) showing when pinning things like that, you'd want to consider wrapping all your content in a div and pinning this wrapping div instead.

 

 

 

 

 

For any subsequent ScrollTriggers on elements within that wrapping div, you will then need to set the pinnedContainer property to that pinned wrap, as they won't have any pinSpacing to consider for their positioning (because they are inside the pinSpacer of the pin you created before) and thus will not get the correct values as you might expect, otherwise.

 

Hope that helps  

Thanks @akapowl,

 

It worked perfectly.  

what does this mean,

Quote

you will then need to set the pinnedContainer property to that pinned wrap,

do i need to set a property for wrap container ?? 

[akapowl]

11 minutes ago, Dipit Maurya said:

what does this mean

 

That means, that if after that pinning ScrollTrigger you create any other ScrollTriggers on elements within the container you are pinning, you will have to set the pinnedContainer property on those.

 

From the ScrollTrigger documentation:

 

pinnedContainer

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

 

 

There is an exmaple in this thread here:

 

 

[Dipit Maurya]

Got it. Thanks @akapowl. 🥳