Making the most robust tab system ever!
- Oliver Stanton
- Oct 24, 2021
- 2 min read
Updated: Oct 28, 2021
After playing around with my Blueprint animation system, I decided to try making another tab system, and this time got it to work flawlessly.
Some of this is similar to my other attempts at tab systems, but this time I used a function with a Switch in it coming off a new variable called "LastSelectedTab" (which sees which tab was last selected so it can only deselect that and not all the tabs at once), and this deselects that specific tab with a custom event within the tab widget.

The custom event sets the specific settings in each component to their selected variable settings, and also sets a "Selected" boolean variable to true. This not only keeps the clicked animation at the end so it doesn't unhover, but also semi-fixes a bug where the animation of the tab pauses when clicked on. Using this custom event, it just snaps to the end frame essentially, which stops the confusion of pausing the animation.

I also made an "Unselected" event, which just plays the animation in reverse, the same as what happens when the mouse unhovers over the tab.

I also have a branch that only plays the animation when "Selected" is true, which is what brought about the pausing animation bug in the first place, but without this branch, the animation would play even when the tab is selected, so it is needed.

Before doing the Switch inside a function with the branches, I had a Switch with only the executions being what was needed, e.g.:

This was bad because I need to reroute the nodes for each tab, and it was just more messy than it needed to be. Putting it in a function made it a lot cleaner, and also let me use branches to make sure that the last selected tab isn't the currently selected tab, which caused problems because the tab would deselect when clicking itself (like a checkbox), which is not what I wanted. So now you can click it as many times as you like and it won't change.
After making this video, I realised that clicking a tab before the animation is finished results in the previous tab snapping to its end animation instead of playing it. I honestly am not sure why this happens, but it is a very small thing so it might not matter much.

Comments