Adding Smooth/Liquid Scrolling in Wix/Wix Studio
A Guide Inspired by Pangram Pangram Type Foundry 📚🌊
Smooth scrolling can significantly enhance the user experience on your website, creating a fluid and engaging navigation. Websites like the Pangram Pangram type foundry demonstrate how effective this feature can be. In this article, we’ll guide you through the steps to implement similar smooth scrolling on your Wix site using custom code.
Step-by-Step Guide
1. Access Wix Site Settings
First, log in to your Wix account and open the site where you want to add smooth scrolling. Navigate to your Site Settings.
2. Navigate to Custom Code
Scroll down to the Advanced section, and click on Custom Code.
3. Add New Custom Code
Click on the button that says Add Custom Code.
4. Paste the Code Snippet
In the Paste the code snippet here: box, copy and paste the following code. This code snippet was developed by Hardik Bhansali and detailed in an article on enhancing user experience on the Visual Identity website.
<script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
<style>
html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
</style>
<script>
const lenis = new Lenis({
lerp: 0.1,
wheelMultiplier: 0.7,
gestureOrientation: "vertical",
normalizeWheel: false,
smoothTouch: false,
})
lenis.on('scroll', (e) => {
console.log(e)
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
</script>
5. Final Steps
In the Name: field, enter a name like Liquid Scroll/Smooth Scroll.
Ensure that Add Code to Pages: is set to All Pages.
Set Place Code in to Head.
Customizing the Scroll Speed
After applying the code, smooth scrolling will be automatically added to your website. If you want to adjust the scroll speed, open the custom code settings (Edit Settings) again and locate the line:
wheelMultiplier: 0.7,You can tweak this value up or down to adjust the scrolling speed according to your preference.
Credit the Code Developer
Make sure to give credit to Hardik Bhansali, who developed the code. You can find more details and similar enhancements on his article.
Conclusion
Adding smooth scrolling to your Wix site can greatly enhance the user experience, making your site feel more professional and engaging. Follow these steps, and you’ll have smooth scrolling implemented in no time
