Tab animation with webflow

Community resources
1

I have this sample for tab animation:

I have animation on tab link as per this example. Attach is a screen shot of the animation tab setting for the standard tab.
For some reason I am able to get the automated tab switching… the Load bar itself seem to color but does not switch to the next tab.

Any help in resolving the issue is appreviated.e

Screen Shot 2021-02-13 at 11.17.40 PM
Screen Shot 2021-02-13 at 11.17.40 PM484×598 26.8 KB

2

Hi @Rafiki_Webflow - Can you please share your read-only link so the community can help you better? Thanks!

3

Hi @myonke
thanks for the prompt reponse.

https://preview.webflow.com/preview/test-905973-5f9b947067c0e7b6be158bfb7?utm_medium=preview_link&utm_source=designer&utm_content=test-905973-5f9b947067c0e7b6be158bfb7&preview=524a2dc50eb41b76f11303f230768ed6&mode=preview

When I load the page the bar under the first tab gets colored, it does not move on automatically to the second and third and loop around like the original template that I copied. I believe I have the js and style tags added before header and before tag.

Appreciate the help in finding what I am missing here

thanks

4

Hey, thanks for providing the link.

I believe you have one of your classes named wrong with the way the auto tabs are setup, specifically for the tabs menu. Here’s how to fix it:

  • Go to your Styles Manager on the right panel and clean up any unused classes. If you don’t want to delete them all, just make sure to delete the styling for the class called “tabs menu.”
  • Then go back to your tabs section. You have the tabs menu named “tabs menu 5” right now. Click on the class on the right panel and do a re-naming of the class to be “Tabs Menu” and publish.
  • Check the live site, and you should be all good (the auto rotate only works on the published site)
  • If you still have issues, go back and check that you have all of the tab components named the same way as the cloned project. When you cloned it, Webflow renamed a bunch of classes automatically, which broke the original functionality because it was based on class names.

Hope this helps, and please let me know if this solved your problem.