https://codepen.io/rosinida/pen/BargMXG
check out this codepen link here scroll-snap is not working when lenis scroll is used for locomotive scroll
pls Help
I tried everything so please help now below is the code of above code pen link this is not my exact work my exact work is on react but problem i am facing is same i.e, scroll-snap disables on using lenis locomotive scroll
<body>
<div class="firstele">
<div class="img-bg"></div>
</div>
<section></section>
<section class="color-bg"></section>
</body>
html {
font-family: sans-serif;
scroll-behavior: initial;
width: 100%;
min-height: 100%;
/*------------Add scroll snapping-------------*/
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
/*https://css-tricks.com/practical-css-scroll-snapping/#aa-example-3-vertical-full-screen*/
}
body {
margin: 0;
background-color: #1a1a1a;
font-family: sans-serif;
font-weight: 100 1000;
font-stretch: 25% 151%;
}
section {
height: 100vh;
text-align: center;
position: relative;
}
/*---Fixed Image-Background---*/
.firstele {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
.img-bg {
background-image: url("https://images.unsplash.com/photo-1629116625181-67de6ca4d6b9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width: 100%;
}
/*---section 1---*/
/*---section 2---*/
.color-bg {
background-color: #1a1a1a;
}
import Lenis from "https://cdn.skypack.dev/@studio-freight/[email protected]";
const lenis = new Lenis({
lerp: 0.1,
smooth: true,
direction: "vertical"
});
function raf() {
lenis.raf();
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
