Scroll Snap Sections + Scroll through Translated Section

[vanquer]

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

[OSUblake]

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?

 

[vanquer]

@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.

 

[OSUblake]

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?

 

[vanquer]

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).

 

[GreenSock]

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.