How do I stop a slider auto-playing when it's not in view?

Hello everyone,

I have an animation triggering with the auto-play of the slider in the top section of the page. The animation changes the colour of the logo, header and nav icons so it can be seen over the different colour images.

Once the user scrolls past the slider it seems the auto-play is still going and continuing the trigger the animation making the colour of the logo, header and nav icons change down the page.

What’s the best way to only have the animations trigger when the slider is in view?

Thanks in advance.

Daniel.


Here is my public share link:

https://preview.webflow.com/preview/for-good-design-lab-98c608?utm_medium=preview_link&utm_source=dashboard&utm_content=for-good-design-lab-98c608&preview=b5914fed2013a4e81f81531328e1e7ea&workflow=preview