ScrollTrigger Not Pinning

[Jorent]

Hi there,

 

I am new to ScrollTrigger and was trying to create a simple scrollytelling page as shown in the codepen below.

 

The pinning of sections 1 and 3 works well. However, for section 2, pinning didn't work and it just scrolled passed without pausing.

 

Expected behavior: On enter section 2, it is supposed to be pinned like the previous section. After 2 scrolls, unpin and then proceed to the next section.

 

Any advice is greatly appreciated. Thanks!

See the Pen OJVRKxd by pingko8oo1 (@pingko8oo1) on CodePen.

[Sahil]

It does pin as expected but not visible because background image is not set on second section. Instead, after setting bg I see that 2nd section is not unpinning because it is shorter than other sections. Setting end to "+=100%" unpins it correctly.

See the Pen oNOdMQd by SahilAFX (@SahilAFX) on CodePen.

[Jorent]

Hi @Sahil,

 

Thanks for the quick reply! I've updated my codepen above, replacing the background image in section 2 with a background color instead and it worked!

 

On second thought, is it possible to make the text in section 2 static? So that on enter section 2, the text is fixed in the middle of the section and after 2 scrolls, the section unpins and proceed to the next?

 

Thanks again!

[Sahil]

You can achieve that with position sticky, you need to set top property as well for it to work. Check updated demo.