Tabs with animation
Hi there, does anyone know how to achieve this 'tabs' component style where the purple line grows as you switch between tabs?
11 Replies
Seems Complicated, I would like to know too.
I always hate Tabs and Sliders the Most !
yeah, I feel you 😂
@Ahmad should user be able to skip steps?
I'm guessing yes based on the context of the copy
ooops @Ander
here's a demo: https://webflow-tabs-as-steps-progress.webflow.io/
preview link: https://preview.webflow.com/preview/webflow-tabs-as-steps-progress?utm_medium=preview_link&utm_source=designer&utm_content=webflow-tabs-as-steps-progress&preview=2db7b509320222fa99ea1a47c6353512&workflow=preview
keeganleary
CodeSandbox
webflow tabs as progress steps - CodeSandbox
webflow tabs as progress steps by keeganleary
Are you a Patreon subscriber? Your build may require a little adjustment to handle the icons and the final tab ui but general concept should be the same
I'll try to do a patreon tutorial or something.
lots of improvements to be made here... could add css transition to the width too to animate the fill.
👀 Be on the lookout tomorrow on YouTube! 🙂
Wow Keegan! Thank you so much! And you even made a video!! I'll implement it this weekend. Thanks again, your help is invaluable.
🤝
@Ander if you want it to "shrink/grow" will require a bit more work, especially if user can skip to any step. You could use class add/remove technique if user can only go one step at a time though.
Just finished it! I think this works fine
thanks again!
Great work 👏
Web Bae is Bae 🙌