Streaming live at 10am (PST)

Problem with Tabs transition effect


#1

Hi,
I’m currently mocking up a home page using tabs with background images. When I click on a tab link, apart from the tab content pane changing as is usual, I also want to display different content in the section below the tabs. I’ve therefore set up an interaction triggered by clicking the tab link, to hide/reveal the appropriate sections and all this is working well.

However, I’ve noticed that when I add an interaction to each tab, the main tab content pane seems to ‘flicker’ and appears to load twice. This doesn’t happen when I remove the interaction. Can anyone advise how I fix this ‘flickering’?

Thanks!
Carol

Site: http://alice-jones-coaching-2.webflow.io/
Read-Only: https://preview.webflow.com/preview/alice-jones-coaching-2?preview=d4a8c90a775b904297f6fc67faa2650b


#2

I’m pretty sure this is just a bug of the Designer and doesn’t impact the published site… does it?

When I’m manipulating tabs, for a few months I have duplicated tabs, or tab contents printed one after anoter. When I refresh the designer (reload), it disappears. I find that this happens far less if you swap tabs by cliking only in the Settings tab on the right.

Can you tell me if that’s the case? If yes we can turn this post into a “bug” one.


#3

Hi Vincent,

If you look at the published site: alice-jones-coaching-2.webflow.io/ it definitely shows the image flickering when you click on the tab link, so no it’s not in the designer that it’s a problem.

I’ve checked out the published site in Chrome v66, FF v49 and Edge. In Edge the transition of the tab contents is smooth but in Chrome and FF, it flickers. Does this help?

thanks
Carol


#4

Carol I don’t see any flickering. What OS and browser are you using?

As for the bug I was talking about the duplicated tabs or the tabs oprinted one after another only.


#5

HI Vincent,
Windows 10, Chrome 66. How about you?

If I remove the interactions from each of the tab links (which then disables changing the content of the section below), the tab content panes change smoothly so it’s definitely something to do with adding an interaction to the tab link that’s affecting it.

Thanks
Carol


#6

Chrome up to date, mac.

Any chance you can make a screencast video fo the flickering?


#7

Hi Vincent, I don’t have screen recorder at the moment but let me look at that. If I can capture it, I’ll upload for you to see.

I assume you’ve had a look at the interaction I set - do you think there’s something in there I could change?

I guess I’ll have to show it to my client in Edge!

Thx
Carol