Overlapping sections on scroll

How do I scroll over sections like this website:

I have no problem to do it with the hero using fixed position, but how do I do it if I would like to have it every section?


Here is my public share link: LINK
(how to access public share link)

Hi, I just ran into this problem and was able to solve it quickly)

It’s very simple:

  1. The first section should be Relative or Absolute with z-index = auto
  2. The second section, which will overlap the first one, must be Sticky with z-index = 1 or 2 (it depends on the elements in the first section, if you used Absolute with some elements there, the z-index must be bigger than the elements)
  3. You need to go into animations, choose Page TriggerWhile page is scrolling and then set animation for the second section. In the animation settings, set the initial Y position to 0vh, the final position to 100vh.

And that’s it) Smooth and type of animation (ease in, out etc.) adjust as desired.

I hope I could help)