Streaming live at 10am (PST)

Tab Pane blinks and animation problem


#1

Hey guys,

I have some problems with a tab pane. By changing from one tab to another the content box blinks. Does anyone have a solution for that ?

And I tried to animate the change of the buttons. So when a tab is active, the button goes blue. Inactive buttons are grey. But when it changes from grey to blue, it seems that the grey button in the background is not disappearing ?!

Here is the Link to my Tab

https://preview.webflow.com/preview/tabblinksproblem?preview=5b53880876958ffafc8fe2816d40d216

Thank you very much!
Robin


#2

Hey @Robinho!

I can see the issue and from what i can see its being caused by your interactions. Removing your interaction on the link solves this issue.

Can i suggest that instead of having a blue and grey image for each section, you turn them into a font (assuming you have the vector files for each image). As a font you can control the colour of them solely in CSS by setting the default colour of the link (grey) and then changing this to blue when the tab element is active.

Creating a vector font is quite easy and depending on your skill level there are many options from command line to services like http://fontastic.me/. You just upload your svg files and they do the rest. You then download your font file and upload to your projects fonts area in Webflow.

Hope this makes sense and if you need anymore advic let me know smile


#3

Thank you very much that sounds awesome and like it would solve the problem! I'm going to try it and will give some feedback if it works! And the custom font is "readable" for all browser and devices ?


#4

Hey, Yeah because webfonts usually come in .eot, .svg, .ttf and .woff which should have you covered all the way back to IE8 although i'm not sure you would want to support IE8 smile


#5

haha thats true and I think people that still use IE8 wouldn't be in my target group! smiley Thank you very much for your help and time! I


#6

So I have created my font. But how can I change the color of the font by clicking on one tab?


Update: Ok solved my problem. But I had to create a new tab menu, because I deleted the default text box in my old tab menu. So I created a new one to use the default text box in the tab link.


#7

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