Bug with color menu header when is sticky

[AntonioNB4]

Guys, I'm here, unfortunately not with a demo on CodePen but with a website developed in WordPress.
I've created a sort of mega dropdown menu using GSAP. Below is the code, which I would describe as spaghetti (and I welcome any advice on how to improve it). But let's get to the problem.
 

When I hover over the "Group" menu item, the mega menu appears, and at the same time, with GSAP, I change the background of the header and the menu items to blue. When the header becomes sticky, I change the menu items' color using CSS by targeting the auto-generated class ".elementor-sticky--effects" from the module I'm using.
 

The issue arises when the header becomes sticky without interacting first with the menu. While it's sticky, if I hover over the "Group" menu item and then scroll back to the top of the page, the menu items remain blue instead of resetting to the default white color. It's as if the reverse of GSAP goes in tilt.

What could I do? Is there a way with GSAP to detect when the menu has that specific class (.elementor-sticky-effects) and change the menu color with GSAP while it's sticky?

This is the dev website:
https://devmanelli.ioslab.it/


This is the full code:/*mega menu gruppo*/
 

let menu = document.querySelector(".gruppo_menu");
let menu_item = [".other"];
let element = document.querySelector(menu_item);
let drop = document.querySelector(".menu_content");
let col = document.querySelector(".elementor-location-header");
let col_menu = [".menu", ".pre-menu", ".post-menu"];
let element2 = document.querySelector(col_menu);
let line = document.querySelector(".menu-item .elementor-item-active");
let container_logo = document.querySelector(".container-logo");


let animation = gsap.timeline({ paused: true  });

animation.set(drop, { y: -20, zIndex: 1,}, 0);

animation.to(drop, {
    display: "block",
  opacity: 1,
  duration: 0.3,
    delay: 0.2,
     ease: "power3.out",
  y: 0,
}, 0);

menu.addEventListener("mouseenter", () => animation.play());
element.addEventListener("mouseenter", () => animation.reverse());

element2.addEventListener("mouseenter", () => animation.reverse());
container_logo.addEventListener("mouseenter", () => animation.reverse());
col.addEventListener("mouseleave", () => animation.reverse());
document.body.addEventListener("click", () => animation.reverse());



/*mega menu progetti*/

const voice_progetti = document.querySelector(".progetti");
let drop_progetti = document.querySelector(".progetti_content");


let animation_progetti = gsap.timeline({ paused: true});


animation_progetti.set(drop_progetti, { y: -20, zIndex: 1,}, 0);

animation_progetti.to(drop_progetti, {
    display: "block",
  opacity: 1,
  duration: 0.3,
    delay: 0.2,
     ease: "power3.out",
  y: 0,
}, 0);


voice_progetti.addEventListener("mouseenter", () => animation_progetti.play());
voice_progetti.addEventListener("mouseenter", () => animation.reverse());
voice_progetti.addEventListener("mouseenter", () => animation2.play());
col.addEventListener("mouseleave", () => animation_progetti.reverse());
element.addEventListener("mouseenter", () => animation_progetti.reverse());

/*change color header and menu*/

let header = document.querySelector(".myHeader");
let header_gradient = document.querySelector(".myHeader.elementor-sticky--effects");
let li = document.querySelectorAll(".myMenu .menu-item a:not(.custom-icon .sub-menu li a)");
let chevron = document.querySelectorAll(".custom-icon .elementor-item");
let logo = document.querySelector("#logo img");
let overlay = document.querySelector(".overlay");
let animation2 = gsap.timeline({ paused: true });

animation2.to(header, {
  background: "#fff",
    delay: 0.2,
  duration: 0,
    ease: "power2.inOut",
  borderBottom: "1px solid #80c5c2"
}, 0);

animation2.to(logo, {
  duration: 0.1,
    delay: 0.2,
  attr: {
    src: "/wp-content/uploads/2024/03/logo-manelli-mobile-blue.svg"
  }
}, 0);

animation2.to(overlay, {  opacity: 0.6, display: 'block', duration: 0, });

animation2.to(li, { color: "#0C2638", duration: 0, delay: 0.2, }, 0);
animation2.to(chevron, { fill: "#0C2638", duration: 0, delay: 0.2, }, 0);
animation2.to(line, { '--e-global-color-d35985e': "#0C2638", duration: 0, delay: 0.2, }, 0);


menu.addEventListener("mouseenter", () => animation2.play());
overlay.addEventListener("mouseenter", () => animation2.reverse());
element.addEventListener("mouseenter", () => animation2.reverse());
element2.addEventListener("mouseenter", () => animation2.reverse());
container_logo.addEventListener("mouseenter", () => animation2.reverse());
col.addEventListener("mouseleave", () => animation2.reverse());
document.body.addEventListener("click", () => animation2.reverse());


///////

This is the css that i used to color menu item on scroll effects:
 

.header_container.elementor-sticky--effects .myMenu .menu-item a {
 color: #0C2638 !important;
 transition: all 0.3s;
}

A thank you to anyone willing to help me.

[Cassie]

Hi there, could you create a simplified demo in codepen demonstrating the issue. Try to cut the markup and GSAP code down to the minimum necessary to show the problem. 

 

Here's a starting point

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

We'll certainly be able to advise on a fix once we have a demo.

[AntonioNB4]

17 hours ago, Cassie said:

Hi there, could you create a simplified demo in codepen demonstrating the issue. Try to cut the markup and GSAP code down to the minimum necessary to show the problem. 

 

Here's a starting point

 

We'll certainly be able to advise on a fix once we have a demo.

 

 

Hi Cassie ty for response. 
 

Considering that there are two different systems, I tried to reproduce all the conditions, trying to get close to a probable issue. I created the CodePen. In the CodePen, I apply a class to the scroll event on the header named .sticky.

While in WordPress, the class on the header is applied on scroll by the settings of the module named .elementor-sticky--effects.

As you'll notice in the CodePen, when the header is sticky, I change the color of 'a' elements, forcing it with !important. This is because in WordPress, I'm forced to override the module's rule in order to change the color of the menu items on sticky.

The CSS on the website is as follows:

.header_container.elementor-sticky--effects .myMenu .menu-item a {
 color: #0C2638 !important;
 transition: all 0.3s;
}

 

As you'll notice from the CodePen, when I interact with the menu items while the header is sticky and then return to the top of the page, the color of 'a' elements doesn't reset but remains red. This is probably because the CSS rule is taking precedence ? So, I wonder why the rule resets when I don't interact ?

How can I avoid this problem considering that I must have the CSS rule with !important?

See the Pen XWQRdzQ by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Rodrigo]

Hi,

 

I'm not a wordpress developer so I couldn't really tell you about this, but there are several issues reported with elementor and the transition: all 0.3s; style that it applies to the elements. That is bound to interfere with everything GSAP tries to animates on those elements as Jack explains here:

Also you can achieve the same functionality with ScrollTrigger, which would be my approach TBH:

See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen

 

Finally is super weird that you are using GSAP to just set styles values so the transition: all stuff animates them, I would definitely wouldn't do that as well.

 

Happy Tweening!

 

[AntonioNB4]

38 minutes ago, Rodrigo said:

CIAO,

 

Non sono uno sviluppatore WordPress quindi non potrei parlartene, ma sono stati segnalati diversi problemi con elementor e lo transition: all 0.3s;stile che applica agli elementi. Ciò è destinato a interferire con tutto ciò che GSAP tenta di animare su quegli elementi, come spiega Jack qui:

Inoltre puoi ottenere la stessa funzionalità con ScrollTrigger, che sarebbe il mio approccio TBH:

 

 

 

Infine, è molto strano che tu stia utilizzando GSAP solo per impostare i valori degli stili, quindi la transizione: tutte le cose li animano, sicuramente non lo farei anch'io.

 

Buon Tweening!

 

so you give the class with the scroll trigger and then manage everything in css or always within the scroll trigger? For example background color etc

[Rodrigo]

Yeah I'd just use GSAP for the whole thing. If you use a mix and then you want/need to do something on those same elements with GSAP, you'll have to refactor everything in order to accommodate that. Better get it done at the start of the project just in case. Sure enough the demo is using a class but my preference is to not go that route.

 

At the end is mostly what works for you based on the requirements and constraints of your project, there is no just one right way to do things in this particular case.

 

Happy Tweening!

[AntonioNB4]

17 minutes ago, Rodrigo said:

Sì, utilizzerei semplicemente GSAP per tutto. Se usi un mix e poi vuoi/devi fare qualcosa su quegli stessi elementi con GSAP, dovrai rifattorizzare tutto per adattarlo. Meglio farlo all'inizio del progetto per ogni evenienza. Sicuramente la demo utilizza una classe, ma la mia preferenza è di non seguire questa strada.

 

Alla fine è principalmente ciò che funziona per te in base ai requisiti e ai vincoli del tuo progetto, non esiste un solo modo giusto per fare le cose in questo caso particolare.

 

Buon Tweening!

Ok i will follow your words. How can i start to change color bacground when scroll ?

[Rodrigo]

Just use toggleActions in ScrollTrigger:

See the Pen qBwmPxB by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[AntonioNB4]

1 hour ago, Rodrigo said:

Just use toggleActions in ScrollTrigger:

 

 

 

Hopefully this helps.

Happy Tweening!

@Rodrigo look at my codepen, how can manage your animation with the animation play on hover? i need the animation on scroll and this is ok, and at the same time the hover animation for change background color and color of menu item when the header is not sticky. As you can see togheter create some bugs, some animation not reverse 

See the Pen XWQRdzQ by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Rodrigo]

Handling the mouse enter/leave on each menu element is a completely different thing and you shouldn't animate the background of the entire heading, just each element:

See the Pen MWRomzq by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!