How to Add Liquid Scroll to Your Wix Studio Website
- Dallas Texas Web Design Co.
- May 29
- 2 min read
Want to give your Wix Studio site a smooth, professional scroll effect like top-tier design agencies? Liquid Scroll (powered by Lenis.js) is a lightweight way to enhance user experience—and it’s super easy to install.
Here’s how you can add it to every page on your Wix Studio website in just a few minutes.
✅ Step-by-Step: Add Liquid Scroll to Wix Studio
1. Copy the Code Below:
<!-- Load Lenis Smooth Scroll -->
<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>
2. Open Your Wix Dashboard
Log in to your Wix account.
Choose the site where you want to add the effect.
3. Go to Settings → Custom Code
In the left-hand menu, scroll to Settings.
Then scroll again to Custom Code and open it.
4. Add the Code
Click + Add Custom Code.
Paste the full code snippet above.
Give it a name like: Liquid Scroll.
Select:
✅ Place code in: Head
✅ Load code on each new page
Choose your domain, then click Save.
5. Refresh Your Browser
Open your site in a new tab or window.
Refresh the page, and you'll see the smooth scroll effect in action!
🌟 Why Use Liquid Scroll?
Smooth UX for visitors
Simple installation—no app needed
Lightweight and fast
Professional look and feel
Need Help Customizing Your Site?
We specialize in fast, clean, and responsive Wix Studio design and custom code enhancements.🔧 Contact Dallas Texas Web Design Co. to take your site to the next level.
