Make Your GoHighLevel Pages Feel Premium with Smooth Scrolling

[Sascha]

? How to Add Smooth Scrolling in GoHighLevel Using GSAP


Many people ask: “Can we add smooth scrolling inside GoHighLevel (GHL) pages?” , 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="

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

"></script>
<script src="

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

"></script>
<script src="

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

"></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 ?.

Источник:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.