vanquer Posted February 17, 2022 Share Posted February 17, 2022 Hi, I'm trying to scroll snap with scrolling through first section which is translated into Intro Section. Snapping just stops working after First Scrolling is done and I do have this blank section under Intro and translated one. On first slight scroll it should fluid this rounded section without blank spacer underneath, then after it should snap normally to 2 and 3 section. Lastly on scroll to the top, rounded section should be translated again, but how could I achieve this effect? See the Pen Exboprq by wisee (@wisee) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 17, 2022 Share Posted February 17, 2022 Hi vanquer, I'm a little unsure about what you're trying to do, but I would suggest removing all the scrolling/snapping stuff until you have going on, and just focus on getting the animation to behave like you want first. After that it would be much easier to add on the snapping behavior you want. Do you have an example of the type of effect you are going for, like maybe something you saw on another site? Link to comment Share on other sites More sharing options...
vanquer Posted February 17, 2022 Author Share Posted February 17, 2022 @OSUblake To be honest, I don't have anything that I could show you except of my pen. I've searched a lot to fit my concept, but unfortunately anything was close. Firstable, I want to be able to scroll snap through the sections. Secondly, when user slightly scrolls the page, first section should move down 100vh, be fluid (clip path 75%) and snap to the center. But without this spacer underneath. Then user can scroll snap through the 2 and 3 section. I hope that I explained it enough to be able to understand this concept. Link to comment Share on other sites More sharing options...
OSUblake Posted February 17, 2022 Share Posted February 17, 2022 1 hour ago, vanquer said: Secondly, when user slightly scrolls the page, first section should move down 100vh, be fluid (clip path 75%) and snap to the center. But without this spacer underneath. I guess this is the part that is confusing me the most. Why are you translating it down? And is the first part that is light blue just supposed to be never seen again? Link to comment Share on other sites More sharing options...
vanquer Posted February 18, 2022 Author Share Posted February 18, 2022 7 hours ago, OSUblake said: I guess this is the part that is confusing me the most. Why are you translating it down? And is the first part that is light blue just supposed to be never seen again? Because this section will be fluid on screen, it will show other elements (like image, description etc.) when is ready. Maybe it does not have to be translated down, but for start it needs to sit onto this blue background section. When user scrolls up to the top it should come back to the previous state (when first section is circled again). So this first section fit to the question: How to scroll through the section, which is moved 100% up, so it does not have its own scroll height (because it sits on blue section which is first and is 100vh aswell). Link to comment Share on other sites More sharing options...
GreenSock Posted February 18, 2022 Share Posted February 18, 2022 Hi @vanquer. I read your post many times and I'm totally lost, sorry. I just don't understand what you're asking. 🤷♂️ Perhaps you could simplify things a bit and only focus on one piece that's troubling you? This definitely seems like a logic issue to me, not really a GSAP-specific question but I very well may be totally misunderstanding. Please keep in mind that these forums are meant for GSAP-specific questions, not general logic troubleshooting or "here are my list of requirements, please make my project work for me" requests. See the forum guidelines. 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