Jump to content


ScrollTrigger with Divi Theme's dot navigation

Go to solution Solved by Cassie,

Recommended Posts



I believe I'm having a conflict issue with GSAP ScrollTrigger and Divi theme's Dot Navigation.


I have a ScrollTrigger animation running for the first section on my page. And it looks like when I use the "pin: true" , the Dot Navigation gets stuck at the first indicator and don't change when scrolling (see attached screenshot).


If I take the "pin: ture" out of the ScrollTrigger, it works fine, but then my animation don't work as supposed to.


I attached the JS script for ScrollTrigger and here's a link to the website in production (https://museudastoninhas.com.br/). The Dot navigation on the right edge will show up after you scroll past the first section. Unfortunately I can't create a Codepen demo for this as it involves the theme's code.


I understand this might be tricky without actually looking at Divi's code for the dot navigation, but I was wondering if there might be some solution for this or another way to the scroll animation.


Also, this is my first time using the GSAP library but I'm loving it!






Link to comment
Share on other sites

Hi Emad,

I'm afraid I don't know how to help seeing as the code for the nav wasn't authored by you and (I assume) doesn't use GSAP.

Have you considered taking the dot nav out and rolling your own with scrollTrigger? That's probably the route I'd go down.

Sorry I can't be more help.

(glad to hear you're enjoying the tools too 🥳)

  • Like 2
Link to comment
Share on other sites

Hi Cassie,


Thanks for the demo, that's great!


I think I'm gonna go with creating the navigation using GSAP. At least that way I'll have more control over it.


Thanks again!


  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hi thanks for making the scroll thingimajig I was interested the use of the css 
 display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
-webkit-box-pack, had not seen this before. would you mind explaining using both box and flex?

Link to comment
Share on other sites

Cassie forked someone else's pen that already had that CSS in it. I don't think you need...



Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Warning: This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See flexbox for information about the current standard.




  • Like 1
Link to comment
Share on other sites

Ah ok thanks, just curious as to why use it, fallback for flexbox maybe?

Link to comment
Share on other sites

It might have been a fallback many, many years ago, but Flexbox is supported in every browser, including IE, so there's no reason to use it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.