Scroll Trigger pinnedContainer confusion

[DottyTom]

Hi all,

 

My first post here. I'm really struggling with Scroll Trigger and pinnedContainer. Perhaps I misunderstand. Check out my codepen!

 

I've got 3 pinned sections - in the second section is a test <div class="test">. I've added a scroll trigger to the node so I can detect when it's visible. When the <div> is active, it's blue and when inactive it's red. No matter what I do with the pinnedContainer property, the start and end positions of the <div> continue to move when the pinned container is moving.

 

As you can see in the codepen, the colour changes depending on the scroll position - the user should only ever see a blue box.

 

Tom

See the Pen JjVqEmr by Tom-Moore-the-scripter (@Tom-Moore-the-scripter) on CodePen

[Rodrigo]

Hi @DottyTom and welcome to the GSAP Forums!

 

The reason  you're seeing other elements scroll over the one with the red/blue one is because you have pinSpacing false on all of them, including the one with the blue element.

 

Maybe you're trying to do this:

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

 

Hopefully this helps.

Happy Tweening!

[DottyTom]

Thanks for this @Rodrigo but that's not what I'm looking to achieve unfortunately. I don't want any pin spacing, I want the same behaviour as my codepen example but;

1. When scrolling from top to bottom, the box should turn blue when the top hits the bottom of the viewport, and then turn red as soon as section 3 overlaps.
2. When scrolling from bottom to top, the box should turn blue when the top of section 3 hits the top of the box, and then turn red when the top of the box hits the bottom of the viewport.

I think I was naïve in thinking this was straight forward 😝 

[Rodrigo]

I'm not 100% sure I follow what you're trying to do. I forked the codepen and made some changes to it:

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

 

At the end the pinnedContainer config is not needed since any of the pinned elements is adding any vertical space.

 

Hopefully this helps.

Happy Tweening!

[DottyTom]

Hey @Rodrigo sorry, I've been away for a few days. Thanks for looking at this. I think I've misunderstood how events are firing on  elements when pinning is involved. I think the enter, leave and toggle events fire differently when an element is going to be pinned.

 

If I have pinned elements, they fire the enter/leave/toggle when they get pinned or unpinned rather than when they come into/out of view. Is that the intention? If so, is there any other event that I could listen for that fires when they enter or leave the scrolling element?

 

It's a shame there isn't an 'onPinned' and 'onUnpinned' that flags that specific event rather than changing the behaviour of a useful event.

[Rodrigo]

Hi,

 

The onEnter/Leave/Toggle callbacks work based on the start/end points you define in your ScrollTrigger configuration:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onEnter

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onToggle

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#end

 

The element that you want to pin will become pinned once the start of the trigger passes the start of point, so for example if you have start: "top top" that means when the top of the trigger element gets to the top of the viewport. Same with the end point as you can see in the docs. That's why there is no need for onPinned  and onUnpinned callbacks, since those will fire at the same time that other callbacks fire so it will be some redundancy in the API.

 

I strongly recommend you to go through the docs and experiment with simple setups in order to understand how the callback system works.

 

Hopefully this clear things up.

Happy Tweening!