Jump to content
Search Community

ScrollTrigger with Divi Theme's dot navigation

ekhateeb test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

dot-nav.png

script.js

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

  • 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...

 

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

 

  • Like 1
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.
×
×
  • Create New...