Scrolltrigger white space generated by pinned element

[angelokeirsebilck]

Hi All,

 

I am trying to achieve some basic Scrolltrigger functionality with a pinned section while one image is fading in, however I am facing a problem. The small codepen will illustrate my problem/question better.

pinSpacing is set to true so my pinned section does not overlap the next block while the animation runs. This all works fine but the problem is because the section (.Slider) is pinned, it creates a white space. The effect that I want to create is that the green section (.Slider) is pinned at it's place but no white space is created above this section.

Is my approach in the right direction? Or should I try to achieve this in a different way?

Thanks!

See the Pen bGapejV by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

[OSUblake]

Hi angelokeirsebilck,

 

If I understand you correctly, you would kind of do like the inverse here, including the content above in the pinned container.

 

 

So kind of like this?

 

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

 

[angelokeirsebilck]

Hi,

 

Thanks for the reply.

Yes that is the effect I want to create but without pinning the whole body. If i go with this approach the whole body is wrapped with a pin-spacer element and this seems a little dirty. Is there a way to do this without pinning the whole body?

 

Thanks!

[OSUblake]

It's not pinning the whole body, just what what you want to be visible above it while that section is pinned. And I wouldn't say it's dirty, it's what's needed to achieve to that effect. 

[angelokeirsebilck]

Hi,

Ok, thanks I will need to pin the whole wrapper.

I have an extra question (updated the pen). I made another scrolltrigger on the next block triggering when the top of that block hits top of viewport but the start position is not correct because of the pinned section.

I read in the common mistakes docs that this can happen when you set the scrolltriggers in wrong order but here the second scrolltrigger gets initialized after the first one so this should not be a problem, right?

What is the best way to reposition the starting point?

 

Thanks!

[akapowl]

Hello there Angelo,

 

For any subsequent ScrollTriggers within that same wrapper/pin-spacer you will want to set the pinnedContainer property to have their starts/ends where you'd expect them to be.

 

From the docs:

 

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)