๐ 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/
 
 
              
 
    
Top comments (0)