Streaming live at 10am (PST)

Animated Tabs Out of Tabs Menu

Hi there!

I develop the site and my client wants me to create such animated feature tabs

Is it possible with Webflow only or need some JS and jQuery?

Thank you!

For what I see, it’s possible to do it solely with Webflow. It’s going to be time demanding, of course, but I really think you can do it.

1 Like

@Jeandcc

thank you! so I need to think about how to make tabs around the tab menu not to moving when it’s clicked https://storm-53b10e.webflow.io/train-page. I’ve copied the code from the site reference but it doesn’t work for me so. do you have any idea how I can fix that? thank you.

Preview page - https://preview.webflow.com/preview/storm-53b10e?utm_source=storm-53b10e&preview=fa4d9b95537c58fde67a9da108577844

Hey @Mariia_Kulida! I don’t really know why your menu buttons are behaving like that (probably some class or animation is messing things up) . What I would recommend you is to just recreate things from scratch. I tried to replicate a similar behavior just to see if I would have the same problem as you, but I didn’t.

https://jean-augustos-sublime-project.webflow.io/#Tabs-Section

https://preview.webflow.com/preview/jean-augustos-sublime-project?utm_source=jean-augustos-sublime-project&preview=f815bf95c4a9267ab758c446b9fe1bb6

1 Like

@Jeandcc thank you so much! I will try to do the same and find out what I missed.

1 Like

Let me know how it goes

1 Like

@Jeandcc sure! thank you!

@Jeandcc thanks a lot! it works https://storm-53b10e-8e887994a04de80b18160598ef.webflow.io/train-page

I continue to build animations. hope to reach the same result :pray::blush:

1 Like

That’s great Mariia! I’m glad I could help.

Let me know if you need anything else

1 Like

thank you :blush: I think I will have a great challenge with animations so let you know how it goes.

1 Like

That’s great! All the best of luck to you.

Let me know how it goes

1 Like

thanks! of course! I’ll let you know :blush:

Hi @Jeandcc!

That’s what I have https://storm-53b10e-8e887994a04de80b18160598ef.webflow.io/train-page

Do you have any ideas how to make active tab static and how make it switch between each other like at https://www.taggstar.com/?

Thanks a lot :blush:

https://preview.webflow.com/preview/storm-53b10e-8e887994a04de80b18160598ef?utm_source=storm-53b10e-8e887994a04de80b18160598ef&preview=5d624425e182b1fd3da700ebd726d2b2

I’m not really sure about what you mean over here.

How, specifically, do you want the changes between the tabs to occur. I don’t really know what specific part you’re trying to replicate

Thank you for reply.

Sorry for my English. I mean that I want to make current tab menu item do not move when it has current state https://d.pr/free/i/dFG5dD

And you can see that tabs changes itself at https://www.taggstar.com/. Do you know how to achieve that?

Thank you so much for feedback :pray::innocent:

Request number 1: Not the simplest nor the easiest way to do it, but you can achieve that by creating new elements, styling the “current state” when a tab is active and re-structuring the animation (This is a very broad explanation. Don’t take this a guide, but only as inspiration for further experimentation). Custom Code would be the way to go here if you don’t really want to get creative and think too much about this.

Request number 2: Definitely custom code. You can create a loop by simulating click events on different tabs elements or any other approach to achieve that result. You won’t be able to achieve a cycling tab menu only with Webflow unfortunately

Thank you so much!

I’ll do both with custom code because I have lack of time.

Thank you for a guide and sharing :blush:

Sound good with me. Let me know if you need anything else.

If you need any help with the code, feel free to reach out to me.

Thank you for being so kind! Just starting to google for code for this task. I’m not an expert in JS. Do I need that for these tasks or anything else? Thank you.

Either JavaScript or jQuery. Any of those will work. Let me know what are your initial feelings when getting the code. If you think that they’re overwhelming, I highly recommend you hiring someone to get them done for you so it will save you quite a lot of time.