▼
Streaming live at 10am (PST)

Tab change interaction wierdness

Design help Animations & Interactions
#1

Hi !

When trying to reproduce this layout / interaction : https://webflow.com/website/Tab-Change-Interaction.

I run into a problem. The interaction works well the first time I try it. Then when I change tab and comeback to a previous tab, the size of the tab seems to get really big before getting to right size and it create and animation wierdness.

Here is my take : https://preview.webflow.com/preview/prosoon-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=prosoon-landing-page&preview=a0e2be7f5f98bb5dde79a85c3ba2d2d3&pageId=5f8f3d939bea8a5e76260d51&mode=preview

You can try the published version here to see by yourself : https://prosoon-landing-page.webflow.io/tabs

Any help would be greatly appreciated as I spent hours on this tonight :sweat:.

#2

Hey guys, I finally found a fix.

In the tab-inactive animation. The parameters of the action that changes the tab-link description width should be set to “–” px and not “0” px. Wierd but it fixed the problem for me.

Cheers.