I want to change button color at the top when particular section is in viewport. I achieved this using Gsap ScrollTrigger. but the issue is the css is getting applied to complete button wrapper instead to a button itself. here is the live link. The website is on wordpress using elementor pagebuilder.
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
gsap.registerPlugin(ScrollTrigger);
// Function to handle button activation
function activateButton(buttonId) {
// Remove active class from all buttons
document.querySelectorAll('.top-button').forEach(button => {
button.classList.remove('active-button');
});
// Add active class to the specified button
document.getElementById(buttonId).classList.add('active-button');
}
// Create ScrollTriggers for each section
const sections = document.querySelectorAll('.scroll-section');
sections.forEach((section, index) => {
ScrollTrigger.create({
trigger: section,
start: "top center",
end: "bottom center",
onEnter: () => activateButton(`button${index + 1}`),
onEnterBack: () => activateButton(`button${index + 1}`)
});
});
});
</script>
CSS
/* Active button styles */
.active-button {
background-color: black !important; /* Active background color */
color: white !important; /* Active text color */
}
I want to have the button background color to black and text color to white when the related section is viewed.