Next element is triggered too quickly after pinned container

[Wolfcoding]

Hi! I have a problem with the scroll trigger function, I have an section with has some pinned content, so it is scrolling horizontally. Directly below that section I have another section which should slide in 2 lines of text. The problem is that the slide in element is triggered before the pin content has been scroll through entirely. I want to make it so the the lines of text slide in only after the pinned content is has been scrolled through. It is a bit had too see in the codepen but if you open it in a larger window that you can see the lines slide in too early. Thanks!

See the Pen XWopyxM by edwin_rocketcode (@edwin_rocketcode) on CodePen

[IndM]

Hi @Wolfcoding! It seems a conflict with the css class container, that have a max width.

My guess is that the code doesn't know the actually width of the content due the max width of the container.
I didn't found a quick fix to make the pinning on the 'content' class work but if you just use

pin: true 

instead, gsap would calculate the width of the content and place it inline on that container class.

This way the next trigger after the horizontal scroll is calculated percect!

Hopes this helps
 

[akapowl]

Welcome to the GreenSock forums, @Wolfcoding

 

The actual source of your problem, is that you are pinning the parent-element of both the elements that you have ScrollTriggers on - thus they will both be inside the same pin-spacer element created by ScrollTrigger. The pin-spacer actually is the one thing that can make subsequent ScrollTriggers aware of prior pins - but if they both are in the same one though, that can't work as intended.

ScrollTrigger does have a built in property though to adapt to scenarions where pinning is done like you do - pinnedContainer

 

If you're going to pin that parent element of both those elements at some point  you will have to make sure to set that element in that property on any ScrollTriggers subsequent to the pinning one.

This is from the ScrollTrigger docs:

 

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. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers (added in 3.7.0)

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

I hope this will help.

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

[Wolfcoding]

1 hour ago, IndM said:

Hi @Wolfcoding! It seems a conflict with the css class container, that have a max width.

My guess is that the code doesn't know the actually width of the content due the max width of the container.
I didn't found a quick fix to make the pinning on the 'content' class work but if you just use

pin: true 

instead, gsap would calculate the width of the content and place it inline on that container class.

This way the next trigger after the horizontal scroll is calculated percect!

Hopes this helps
 

This works, but then the orange bar is not visible when your scrolling through the first container which was a requirement . Thanks though!

 

 

55 minutes ago, akapowl said:

Welcome to the GreenSock forums, @Wolfcoding

 

The actual source of your problem, is that you are pinning the parent-element of both the elements that you have ScrollTriggers on - thus they will both be inside the same pin-spacer element created by ScrollTrigger. The pin-spacer actually is the one thing that can make subsequent ScrollTriggers aware of prior pins - but if they both are in the same one though, that can't work as intended.

ScrollTrigger does have a built in property though to adapt to scenarions where pinning is done like you do - pinnedContainer

 

If you're going to pin that parent element of both those elements at some point  you will have to make sure to set that element in that property on any ScrollTriggers subsequent to the pinning one.

This is from the ScrollTrigger docs:

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

I hope this will help.

 

 

This is exactly it, it seems like `pinnedContainer` solves all the issues, thanks!