I've changed the code a bit to include changing hamburger menu background color when scrolling over dark sections, but it's not working.
What am I missing?
useIsomorphicLayoutEffect(() => {
let ctx = gsap.context(() => {
const logo = logoRef.current;
const menu = menuRef.current;
tl.current = gsap
.timeline()
.to(logo, {
color: "#ffffff",
paused: "true",
})
.to(menu.children, {
backgroundColor: "#ffffff",
paused: "true",
});
sections.forEach((section) => {
ScrollTrigger.create({
trigger: section,
onEnter: () => tl.current.play(),
onEnterBack: () => tl.current.play(),
onLeave: () => tl.current.reverse(),
onLeaveBack: () => tl.current.reverse(),
start: "top 70",
end: "bottom 85",
});
});
}, headerRef);
return () => ctx.revert();
}, []);