Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dipit Maurya

On scroll second section is going beneath first section

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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 :) 

  • Like 5
Link to comment
Share on other sites

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 ?? 

  • Like 1
Link to comment
Share on other sites

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:

 

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×