Is it possible to adjust css scroll-snap speed/easing?

I set up CSS Scroll Snap, and I would like to implement easing to it, if possible. Once it snaps to a point, it scrolls too fast. Is there any way to adjust scroll-snap speed/easing using CSS, JavaScript, or an external animation library? My project is an ASP.NET Core 5 MVC web application.

html, body {
  margin: 0;
  padding: 0;
  scroll-snap-type: y proximity;
}

.landing-page-content {
  scroll-snap-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-page-content h1 {
  color: black;
  margin: 0;
}

.s1 {
  background-color: red;
}

.s2 {
  background-color: yellow;
}

.s3 {
  background-color: blue;
}

.s4 {
  background-color: green;
}

.background-image {
  background-image: url(..pathToImage);
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 100vw;
  background-repeat: no-repeat;
  z-index: -1;
}

<body>
  <div class="background-image"></div>
  <section class="landing-page-content s1">
    <h1>Section One</h1>
  </section>
  <section class="landing-page-content s2">
    <h1>Section Two</h1>
  </section>
  <section class="landing-page-content s3">
    <h1>Section Three</h1>
  </section>
  <section class="landing-page-content s4">
    <h1>Section Four</h1>
  </section>
</body>

I would recommend expanding the snippet to see the effect better.

Recommended topics

Hot tags