BlueOwlCreative » Topic: Tabs – animate elements when different tabs are clicked?

Tabs – animate elements when different tabs are clicked?

Bill Warburton — Wed, 22 Jun 2016 14:01:49 +0000

Hello,

I’m using one of your out-of-the box tab functions, these tabs have the first tab’s content animate on scroll. I would like this animation to repeat each time a different tab is clicked.

Figured I would post here before diving in and trying to alter and create custom css. Hoping there is a more direct solution, maybe a setting, or an area within the visual builder that I overlooked.

Also, quick note… when I go to edit my profile here it says the page is missing?

Thank you.

Reply To: Tabs – animate elements when different tabs are clicked?

BlueOwl — Thu, 23 Jun 2016 07:50:30 +0000

Hi there,

If the anchor is in the URL then the page would automatically scroll to that location, yes…
You mean clicking on a tab should scroll back to the beginning of the tab content?

Forum user editing: yes, certain user types have a problem with that… Maybe I can help you mod your user? What is it you are trying to change?

Reply To: Tabs – animate elements when different tabs are clicked?

Bill Warburton — Thu, 23 Jun 2016 13:45:28 +0000

Hello,

Let’s use this for an example:

http://blueowlcreative.com/wp/fortuna/tabs/#visual-builder

The first tab is visible and when you scroll the “Visual Builder” bullet text animates (transitions from right with fade IIRC)… but when you click any of the remaining tabs (“Plenty of Shortcodes” “Responsive Design” etc.) they do not animate.

I would like the remaining tabs to animate to draw attention to the content that is changing (because some items might remain static).

About the user editing I was looking to change user name and set a password that wasn’t auto-generated for ease of use. Not a big deal though…

Thank you,

Reply To: Tabs – animate elements when different tabs are clicked?

BlueOwl — Thu, 23 Jun 2016 17:40:01 +0000

Oh, now I see what you mean!
Unfortunately that is not possible and I will try to explain why.
The animation that takes place when you scroll to a certain element on the page (CSS animations) are achieved generally in VC via a JS plugin that simply calculates an element’s position on a page and when that position is reached the element gets animated in (depending on what animation you choose). Obviously with tabs all elements are at the same position vertically on a page so their animations will be triggered at the same time (when you scroll to the 1st tab content…
I am sorry about that, but I hope that makes sense.
Good luck!

Reply To: Tabs – animate elements when different tabs are clicked?

Bill Warburton — Thu, 23 Jun 2016 19:43:53 +0000

I see, well I figured it was related to everything being within the same element, or something close to that. It’s not the end of the world, maybe if I have the time I will try some sort of work-around, or alternate way of viewing the section.

Thanks for your help.