Scrolling roll-on tabs activate as user scrolls

Hi

I am new to Webflow. I am desparately trying to create roll on tabs that activate as a user scrolls down the page. The requirement is that as the user scrolls fown the page, the tabs will activate (First TAB 1, then TAB 2, then TAB 3). i have found interactions that allow you to change CSS attrivutes to make is appear as the tab is selected as the user scrolls down, but unfrotauntely this does not open the actual tab and show the relevant image on the Right-Hand-Side as the user scrolls.

Ideally as the user scrolls down the page, when they arrive on the tabs section, instead of scrolling the page, the website should scroll tabs 1-3, then continue scrolling down the page after all the tabs have been shown to the user.

Is this possible in Webflow? I have looked everywhere and cannot seem to find how to do this. My Javascript knowledge is probably a 1/10, so I would like to attempt this with a Webflow interaction. Is this possible?

Any guidance or assistance would be greatly appreciated!

Thanks so much


Here is my public share link: LINK