Animate elements inside a horizontal scroll section

Hello,

I’m wondering if someone in this wonderful community might be able to help. I’ve built a horizontal scroll interaction for a client’s company timeline. I’ve been able to build the horizontal scroll animation from a Webflow video tutorial, but my question is about animating elements within each timeline “item”.

You can see in the read-only link below. I am able to rotate the first image on the page scroll, but I am unable to replicate this image rotation for future timeline cards. I’m assuming this is because the “while scrolling in view” interaction is triggered by vertical scroll, so even though the second and third items aren’t in view, they have technically vertically scrolled up “into view”

I’ve tried setting off-sets and updating the keyframe timeline position, but nothing seems to work. Does anyone know a workaround or a way to fix this?

https://preview.webflow.com/preview/dickinson-homes?utm_medium=preview_link&utm_source=designer&utm_content=dickinson-homes&preview=b2c4276ae77d6116f85730fbdf521503&pageId=655d01f9fc9f0ec260c1bd64&workflow=preview