Scroll-Horizontal: Trigger Animations Only for the Visible Section

I’m a student, and I really need some help. I’ve also spoken to my professor, but the last time i have a question, i don’t received a response. I need to complete this work before the end of 2024…so if someone could help me!I reallu apreciate.

I’m working on a horizontally scrolling website where each section has different animations (images,button,div…) that should trigger only when the section becomes visible in the viewport. The goal is to stop or pause animations for sections that are not currently in view and activate them only when the user scrolls to the corresponding section.

What I’ve Tried:
I’m using the Intersection Observer API to detect when a section enters or leaves the viewport.
I’ve added classes (visible and paused) to toggle the animations based on the section’s visibility.
The animations work, but the problem is that they trigger for all sections at once or behave inconsistently when scrolling through the horizontal layout.
I also tried chat gpt e outras ai…