Make Your GoHighLevel Pages Feel Premium with Smooth Scrolling

🚀 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

1. Save your page.

2. Open it live.

3. Scroll up and down.

4. 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/