Looking how to do this interaction

Looking to duplicate this look for the site. Specifically the scroll in pages. Any ideas?

Hi @jbleroux,
I would suggest to try tabs widget. Then you can use interaction with tab-trigger and make content slide from above.


Thanks Anna do I create separate pages for the content and then load them in the tabs?

It is not necessary should be pages, just content on every tab pane should be wrapped with div, which you can connect to interaction. :smiley:

I can scroll the tabs in but when there is an existing tab it defaults to the the tab easing. Doesn’t appear to be something I can do. https://preview.webflow.com/preview/actor1?preview=a01e65313059cea0ac0501dbe00b5132

unless I am doing something incorrect

You used wrong trigger for interaction. Here is video what exactly you need https://drive.google.com/file/d/0B-7cg8BSq1Z_R29iQ2Vmd1JVN0U/view?usp=drivesdk

Note: there is known bug with tab interaction in preview mode - it will shown only once. But it is working perfect on published site, do not worry.

Thanks Anna, I followed it exactly but it is still not repeating past the first scroll on the webflow io page. I had to watch it a few times to make sure I was doing every step. I have tried it on two web browsers so not sure what it could be. Seems to default back to the regular tab settings

Did you publish site? Could you give the link?


Weird… on my site tabs animation is working http://saevskaya.webflow.io/

I will check what can be wrong.

Ok, you still have interactions connected to tab-links and “content main mob”. Interaction should be connected only to tab-pain. Uncheck it please and republish site.

so remove interaction from the tab links set to none, just leave them on tab pane?

Exactly. And from “content…” too.

should i delete the content divs?

Noooo, uncheck interaction from that divs.

yeah I did that. I noticed the 2nd part of interaction isn’t working they are not collapsing back like in the preview within the interaction

Did you re-publish site?

yep. Thank you for showing me how to use the tab interaction. It’s close. I’d really like that scroll through effect like on that site. but it is not even scrolling back up to hidden on the interaction if I click the link button twice.

I am sorry that it is not working properly. :confused: I can make workaround if you still interesting.

I am gonna send an email to the support team maybe they can see what it is. I’ll let you know if I get it solved. Totally unrealted question but is there a way to adjust the width of the mobile menu that comes with the navbar?