Odd tab animation behavior with param

1

I have a set of routed tabs that are NOT using animation. They work just fine until i add a parameter into one of the paths. When i add a param, the tab now does a swipe animation, and after this all the other tabs are doing the same awkward animation and other css glitches occur on the pages. Taking away the param and its fine again.

{
path: '/',
url: './pages/tabs.html',
pushState: true,
tabs: [
	{
		path: '/tab1/',
		id: 'tab1',
		componentUrl: './pages/tab1.html',
	},
	{
		path: '/tab2/',
		id: 'tab2',
		componentUrl: './pages/tab2.html',				  
	},
	{
		path: /tab3/:id?/', //NOW IT ANIMATES?
		id: 'tab3',
		componentUrl: './pages/tab3.html',
	}, 
  ],

},

2

I think because it can’t find this route when switching tab

Need more details with code example, better JSFiddle