asapon Posted February 10, 2023 Share Posted February 10, 2023 Hi! Could you please help. I’m trying to implement a React SPA with full page scroll combined with a few pinned pages that also includes full page scroll. Let’s say I have 10 pages in total, which are easily scrolled per page, where second, third and fourth pages are pinned. So when we get to the second page it sticks and on the next scroll the third page appears through opacity. When we’re out of pinned pages the next pages should be scrolled normally. I implemented the pinned pages using the ScrollTrigger which works fine, but I can’t figure out how to add full page scroll to these pinned pages. So now we have a problem that the scrolling is either not enough and you have to scroll twice for the next page to appear or it scrolls more than 1 pages at a time. Sorry I don’t have a demo for you, but I was hoping you could at least point me in the right direction on how to achieve such behaviour. I looked at many demos with scroll trigger but it didn’t help. Thank you in advance Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 10, 2023 Share Posted February 10, 2023 We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. Link to comment Share on other sites More sharing options...
asapon Posted February 10, 2023 Author Share Posted February 10, 2023 Ok I understand. Here is the demo: See the Pen KKBjLPG by a_sapon (@a_sapon) on CodePen Could you please help me understand how to add a full page scroll for the pinned sections as well as for the unpinned sections, so the scrolling would be easy and user wound't have to scroll twice for the next section to appear? Thank you. Link to comment Share on other sites More sharing options...
Solution GSAP Helper Posted February 10, 2023 Solution Share Posted February 10, 2023 7 hours ago, asapon said: Could you please help me understand how to add a full page scroll for the pinned sections as well as for the unpinned sections, so the scrolling would be easy and user wound't have to scroll twice for the next section to appear? Thank you. I read your question a few times and I'm still pretty lost. What do you mean by "add a full page scroll"? The whole page is scrolling in that demo. And what do you mean by "so the scrolling would be easy"? It seems very easy to me. "...wouldn't have to scroll twice" - are you saying you want the user to be able to do just one small move of their mouse wheel or one tiny touch gesture and have it move all the way to the next section? If so, you probably need to look at Observer plugin. There's a demo on that page that does exactly that. Link to comment Share on other sites More sharing options...
asapon Posted February 24, 2023 Author Share Posted February 24, 2023 Thank you for your reply! Sorry for my late response. Quote are you saying you want the user to be able to do just one small move of their mouse wheel or one tiny touch gesture and have it move all the way to the next section? Yes! That's exactly what I was looking for. I was managed to implement it using the Observer plugin. Thank you very much for your help 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