Menu
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.
498
asked Mar 18 '26 19:03
No, the css scroll snap property does not allow that. You would need to use touch events with javascript. If you had an image carousel for example you would use translate3d to move it and you would have an easing css property. You would have to write your own logic though to decide when that should kick in based on the way the user swipes in that area.
190
answered Mar 20 '26 07:03
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With