Overlapping sections on scroll

Design help Animations & Interactions
1

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)

2

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 Trigger → While 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)