Basic Interactions not triggering correctly

Hi Webflow Community,

I’m having some trouble with basic animations modifying opacity.

What I’m trying to achieve is when each page is scrolled into view, show a bouncing arrow after 2 seconds.

I couldn’t even get the arrow to show correctly; so the bouncing is on hold!

The first arrow shows up just fine after around 2 seconds.

When I visit the second page, the arrow is already loaded! Then when I scroll to the third slide and scroll back to the second slide, it seems to work.

The animation ‘Arrow Opacity Section 1’ is tied to section 1 text
The animation ‘Arrow Opacity Section 2’ is tied to section 2 text

Any help is much appreciated, I’ve spent quite some time watching tutorials and messing around with this and can’t quite figure it out.

Thanks!


Here is my public share link: LINK