How to replicate this shutter reveal effect from this wix template?

I want to recreate this shutter reveal effect, in which as we scroll the hero section (the shutter) slides upwards and reveals the section below it, once the shutter is fully out of the viewport the scroll transfers to the rest of the website and we can scroll through the other sections (what I think happens).

Here is the link to the wix template: Link

I tried setting the animation timeline to scroll like this:

.hero-section {
  position: absolute;
  height: 100vh;
  width: 100%;
  z-index: 1;
  animation: uncover linear;
  animation-timeline: scroll();

  @keyframes uncover {
    to {
      transform: translateY(-100%);
    }
  }
}

but the problem here was when I scroll the hero section goes up but the sections under it also scroll up but at a normal speed (slower than hero section). Instead I want the content beneath the hero section to be static until the hero section is completely out of viewport.