ScrollTrigger with Divi Theme's dot navigation

[ekhateeb 1 Likes (Newbie)]

Hi,

 

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!

 

Thanks!

-Emad

script.js

[Cassie 5,115 Likes (Superhero)]

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 🥳)

[Cassie 5,115 Likes (Superhero)]

Here's a demo to help you along -

See the Pen rNwwvbd?editors=0010 by GreenSock (@GreenSock) on CodePen

[ekhateeb 1 Likes (Newbie)]

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!

-Emad

[Cassie 5,115 Likes (Superhero)]

Woo! Excellent choice. 🥳

[JamesGrubb 10 Likes (Newbie)]

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?

[OSUblake 18,474 Likes (Superhero)]

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

 

Quote

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.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack

 

[JamesGrubb 10 Likes (Newbie)]

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

[OSUblake 18,474 Likes (Superhero)]

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.