glide.js is a simple library for adding smooth scrolling to a website.
var glide = new Glide('.el-to-scroll');
glide.start();| options | description | default |
|---|---|---|
| easing | css easing function, value type can change based on plugins used (e.g. greensock) | cubic-bezier(.2,.62,.2,.94) |
| duration | duration of scroll transition | 0.8 |
| custom | callback on scroll, (parameters: (Glide instance, scrolled amount)) | cubic-bezier(.2,.62,.2,.94) |
Since mobile will already scroll smoothly, you can disable the smooth scroll using only CSS:
.el-to-scroll {
position: relative !important; // or static !important
transform: none !important; // or translate3d(0) !important
}In this case, the JS will still run, but it makes it easier to turn it off and on. If you do want to completely stop it from running, you can use the stop method1:
glide.stop();Make sure Greensock is included before Glide. Plugins must be loaded before the core library.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="../src/plugins/glide.plugin.greensock.js"></script>
<script src="../src/glide.js"></script>