Jorent Posted April 10 Share Posted April 10 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 Link to comment Share on other sites More sharing options...
Sahil Posted April 10 Share Posted April 10 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 2 Link to comment Share on other sites More sharing options...
Jorent Posted April 11 Author Share Posted April 11 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! Link to comment Share on other sites More sharing options...
Sahil Posted April 11 Share Posted April 11 You can achieve that with position sticky, you need to set top property as well for it to work. Check updated demo. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now