Replicate tab interaction

Design help Animations & Interactions
1

Hi,

I want to replicate this interaction (example #3) Webflow Tabs

I know how to make the tab move and change its color with the click trigger, but I can’t figure out how to make it return to its original state after another tab is clicked. HELP.

Thanks,

Here is my public share link: [https://preview.webflow.com/preview/cdu-preview?preview=e453fa60b810ace6d800c69be4319069][1]

2

Hi, @Sebasgaes

First of all, I don’t think you need use flex for styling that tabs widget. Will be enough to set Tab Menu float: left and give settings display: block to all Tab Links. Then you can give the desired width to all Tab widget and you will get exactly same layout but TabMenu will not jump with every click.

For the replicating effect that you see in the example, I would suggest using styling+stransforms (move to the side) for the Current state of Tab Link and set the transition time. Then only thing will left to do is a little bouncing effect on click, which you can do by using interaction.

Hope my explanations is clear enough.

Regards,
Anna

4

Thanks @sabanna it worked just well.

1 Like
5

Hey Anna, remember the help you gave me with the tab treatment. I have the site almost done, but when I go to style it on mobile view portrait, I get a hard time with the tabs. I don’t have a clue on how to make it look good. Would you mind taking a look?

Here is the link: https://preview.webflow.com/preview/cdu-preview?preview=e453fa60b810ace6d800c69be4319069

Page: Catalogo > Any option (Demolición. Generación)

I will really appreciate it.

6

Hello again, @Sebasgaes.

In the mobile view, I would suggest set Tabs menu as a display: flex

240×841 32 KB

and set at least 5px margin to the left and right sides of links.

Cheers,
Anna

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.