I have a codepen linked that shows smooth scrolling and pins each section in firefox. However, once opened in chrome it is delayed. The website behaves perfectly in Firefox because of Firefox's smooth scrolling feature but in Chrome it's trash. Are there any libraries that could be recommended?
I've tried Locomotive.js
Codepen: https://codepen.io/lenniefinch/pen/BaLNqdr
//Locomotive Scroll
(function() {
var scroll = new LocomotiveScroll({
el: document.querySelector("html"),
smooth: true,
smoothMobile: true,
// direction:"horizontal",
// inertia:1,
// repeat:true,
offset: ["10%", 100]
});
})();
//Scroll trigger
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.defaults({
toggleActions: "restart pause resume pause"
});
gsap.to(".first", {
scrollTrigger: ".first",
pin: ".first",
scrub: 0.5,
start: "top top",
end: "bottom 100px"
});
gsap.to(".second", {
scrollTrigger: {
trigger: ".second",
toggleActions: "restart pause reverse pause"
start: "top top"
end: "bottom 100px"
},
duration: 1,
backgroundColor: "#FFA500",
ease: "none"
});
gsap.to(".third", {
scrollTrigger: ".third",
scale: 2,
repeat: -1
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*! locomotive-scroll v3.3.11 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden;
}
html {
font-family: sans-serif;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
min-height: 100vh;
}
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.has-scroll-smooth body {
overflow: hidden;
scroll-snap-type: y mandatory;
}
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh;
scroll-snap-type: y mandatory;
}
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100vh;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.c-scrollbar:hover {
transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
opacity: 1;
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* END */
/* body {
overflow-x: hidden !important;
height: 100vh;
} */
.first,
.second,
.thrid {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 5rem;
scroll-snap-align: start;
}
.first {
background-color: rgba(35, 116, 171, 0.7);
}
.second {
background-color: rgba(255, 132, 132, 0.7);
}
.thrid {
background-color: rgba(188, 217, 121, 0.7);
}<section class="first" data-scroll-section>
<h1 data-scroll data-scroll-speed="8">Section One</h1>
<p data-scroll data-scroll-speed="4"></p>
</section>
<section class="second" data-scroll-section>
<h2 data-scroll data-scroll-sticky data-scroll-speed="10">Section Two</h2>
<p data-scroll data-scroll-speed="5"></p>
</section>
<section class="thrid" data-scroll-section>
<h1 data-scroll data-scroll-speed="8">Section Three</h1>
<p></p>
</section>
<script></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/locomotive-scroll@3.3.11/dist/locomotive-scroll.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js'></script>
<script type='text/javascript' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script>
<script type='text/javascript' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'></script>