Scrolling and Scroll Snapping in Equal Increments

[danytb8]

stackblitz demo (controlled environment)

 

I'm trying to create this scrolling effect

 

video of what's happening locally

 

scroll till section 1 reaches top of viewport and align with it (not pinned)

then continuing the scrolling, section 2 scrolls faster infront of it (while section 1 is scrolling too)

 

idk if it's applied on your screen too but the 1st section's top aligns with the top of the viewport, so if I have text there it won't be half hidden or something.

 

I created the scrolling effect (kinda) but I'm facing a problem with snapping/aligning sections to top of viewport. Each mousewheel scroll should move the section in equal increments of the viewport so that it reaches top instead of under it or over it by a bit.

 

For example, a viewport that has a height of 600px and I want to move the top of a section from bottom of viewport to top in 3 increments each scroll should be 200px, that way the top of the section always aligns with top of viewport.

 

I tried snapping but couldn't get anywhere, I didn't find any tutorials on youtube and I kinda don't understand the docs on snapping.
I tried using chatgpt and deepseek but they break the scrolling.

 

I guess it doesn't matter on mobile as there's a thumb moving the screen.

 

included local files.

page.module.css page.tsx

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

For that particular effect of the sections overlapping, actually that site has some overlay elements inside the same section that matches the background color of the next section, the animation up of that overlay is a bit faster than the scrolling (probably using ScrollTrigger or something similar) in order to give that feeling. Another alternative is to use the approach of this demo:

See the Pen QwWQOBy by GreenSock (@GreenSock) on CodePen.

 

As for the snapping, it works by receiving on or more numbers between 0 and 1, which indicates the progress of the ScrollTrigger instance in terms of the scroll value between the start and end, so 0 is 0% or the start scroll point while 1 is 100% or the end scroll point. If you pass a decimal value like 0.25 it will snap to 25% increments starting with 0, so it will go: 0 - 25% - 50% - 75% - 100%. In the case you describe using 1/3 should do it, since that will scroll to 0% - 33.33% - 66.67% - 100%. The value you have right now is basically 1 divided by the height of the viewport which will snap to really small increments so that really doesn't seem to do much.

 

Here is a simple demo:

See the Pen NPPwbgb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!