Hello,
I've been working on a personal site for the past few months. Everything worked fine. However since my last checks the Scrolltrigger responsible for the nav changing color didnt work well anymore.
Here is a link to my development environment: https://davidkathrein.webflow.io/ (markers are enabled).
The code responsible for the color change:
$(".trigger-dark-nav").each(function (index) {
let triggerElement = $(this);
let tl = gsap.timeline({
scrollTrigger: {
trigger: triggerElement,
// trigger element - viewport
markers: true,
start: "top top",
end: "bottom top",
scrub: false,
toggleActions: "play reverse play reverse"
}
});
tl.to(".navbar", {
backgroundColor: "#3D3D3D4D",
duration:0.1
},0);
tl.to(".navbar-container", {
color: "#FFFFFF",
borderColor: "#7B7B7B",
duration:0.1
},0);
tl.to(".navbar-links-menu", {
color: "#FFFFFF",
duration:0.1
},0);
tl.to(".navbar-cta-wrap", {
color: "#AABDFF",
duration:0.1
},0);
});
Explanation of the situation:
On my page i have multiple "dark-sections", those have the class "trigger-dark-nav". As mentioned earlier since the last month every Scrolltrigger seems shifted. Which makes the nav color change seem random. I have already tried refreshing them at the bottom of the body aswell as triggering a Scrolltrigger.refresh() on the first "trigger-dark-nav" element - which didn't work aswell.
Thanks for your help in advance!
David
PS: if any more code or informations are needed, let me know. I will check this post regularly.