ScrollTrigger ignores "pin offset" when trigger element is affected by pinning

[Dentsu Creative CZ]

Hi,

I have made a demo when you can see the issue. I am using ScrollTrigger to recognise "active" section and according which section is active, setup properly a navigation - thats work fine, you can see it on the first two sections.

The issue came up with the section #3 where I need to pin the sections so user can see the fancy animation inside. After this you can see how the markers are shifted because of that.

I think ScrollTrigger is not checking the current position every time, which is good for performance but he is ignoring the "pin offset". I have try even the `.refresh()` call, but no effect.

Am I missing something? Or is this impossible to do?

See the Pen bGYRRqZ by shamania (@shamania) on CodePen

[OSUblake]

It's possible. You should use pinnedContainer and create your ScrollTriggers in the order they appear.

 

Quote

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)

 

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

[Dentsu Creative CZ]

Few minutes after I have made this post I have found this topic with mention about `pinnedContainer` and tried that. But with no effect.

If you check your codepen its not working as well. It seems same to me. Look at this image (my and your pen together) where I pointed out the issue: markers are shifted from the original position - red line - edge between sections.

 

[akapowl]

Hello @isobarczechrepublic

If you take a look at Blake's example, he only added the pinnedContainer property to the ScollTriggers forEach of your .last-sections.

 

But since your pinned section has a class of first (and not last) you would have to add the pinnedContainer property forEach of the ScrollTriggers for .first, too, if you wanted that section to be affected, too. Now with the way you are setting things up; since those ScrollTriggers are being created before the pinning-ScrollTrigger but will need to know about the pinning duration of a ScrollTrigger you are creating after them, I think logically you will also have to call a ScrollTrigger.sort() at the end to make things work the way you expect.

 

Also, the way I understand it, since the section right before the pinning technically will not have to adjust to the pinning in any way (as it comes before that one), you might have to adjust its end 'manually' for it to remain the exact functionality that you were going for with the toggling of classes.

 

And related to that, I would suggest getting rid of the ScrollTrigger.refresh() in your toggleNavigation() function, as it does appear to throw things off.

 

Now I'm not 100% sure if this really is the way to go, but here is what I understood you wanted to achieve in the end, with all of the mentioned above in place. I hope it does help.

 

See the Pen JjOJwoL by akapowl (@akapowl) on CodePen

 

[Dentsu Creative CZ]

Thanks. Your CodePen looks how it should work!

To be honest, its not very intuitive  but it makes sense. I need to find out a time to apply this on the real project and test it.

Last question, how did you found out the value on line 22 => +=225% ?

[akapowl]

1 hour ago, isobarczechrepublic said:

Last question, how did you found out the value on line 22 => +=225% ?

 

It is 100% for the height of the section itself as it is 100vh tall, 25% because you are pinning the subsequent section 25% from the top of the window and another 100% for the duration of the pinning of the subsequent section - ergo 225%.

[Dentsu Creative CZ]

I am going to give up on this  If you remove the "ideal" properties such as "100 vh" height (which I have used here to simplify it) because in real project there is content coming from CMS, so the height is variable - your solution does not work and not sure what to change to make it universal/flexible.

 

I am going to solve this by "self-made" scroll handler which will be triggered every 300 ms (throttled) when user scroll and check the position of sections - which one is active.