This content originally appeared on DEV Community and was authored by Samee Ullah
🚀 How to Add Smooth Scrolling in GoHighLevel Using GSAP
Many people ask: “Can we add smooth scrolling inside GoHighLevel (GHL) pages?” Yes, we can! With the help of GSAP and a small piece of code, your page can scroll smoothly like Apple’s websites 😍.
Here’s a step-by-step guide:
🛠 Step 1: Add a Code Element in GHL
👉 In GoHighLevel, if you try to load GSAP inside Settings → Tracking Code → Header, sometimes the scripts do not work correctly.
So instead, do this:
Drag a Code Element onto your GHL page.
Open it and paste the full code inside.
This way, the scripts run properly.
🛠 Step 2: Paste GSAP + Smooth Scrolling Code
Inside the Code Element, paste the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollSmoother.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
if (!document.querySelector(".smooth-wrapper")) {
let body = document.querySelector("body");
let wrapper = document.createElement("div");
wrapper.classList.add("smooth-wrapper");
let content = document.createElement("div");
content.classList.add("smooth-content");
while (body.firstChild) {
content.appendChild(body.firstChild);
}
wrapper.appendChild(content);
body.appendChild(wrapper);
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
ScrollSmoother.create({
wrapper: ".smooth-wrapper",
content: ".smooth-content",
smooth: 1.5,
effects: true
});
}
});
</script>
🛠 Step 3: Publish and Test
Save your page.
Open it live.
Scroll up and down.
Boom 🎉 — smooth scrolling is working!
🤔 Why This Works
GHL doesn’t allow script files in the header to always work.
By using a Code Element, we make sure GSAP loads correctly.
Then we wrap your page content in a new container so GSAP’s ScrollSmoother can control it.
⚡ Bonus Tips
Change smooth: 1.5 to 2 or 3 if you want even slower and softer scrolling.
You can also add GSAP animations to make each section fade in, slide, or zoom while scrolling.
✅ That’s it! Now your GHL pages will feel modern and smooth.
A small tweak, but a big upgrade for client experience 🚀.
👉 If you’re using GHL and want your funnels to look premium, perform better, and impress your clients, let’s connect. https://www.linkedin.com/in/samee-ullah-dev/
This content originally appeared on DEV Community and was authored by Samee Ullah
Samee Ullah | Sciencx (2025-10-04T10:21:04+00:00) Make Your GoHighLevel Pages Feel Premium with Smooth Scrolling. Retrieved from https://www.scien.cx/2025/10/04/make-your-gohighlevel-pages-feel-premium-with-smooth-scrolling/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.