Jose Tamu
January 10, 2025 /
Intermediate

Tabs

First tab
Second tab
Third tab
First Tab
Second Tab
Third Tab

How it works

Tabs element contains a Morphing Nav element that acts as the Tabs navigator. Tabs also has “Tab” elements. You can place the content you want at each “Tab” element.
The number of Morphing Items at Morphing Nav must match the number of “Tab” elements.
Tabs Active tab control should match Morphing Nav’s Active Item control for a proper navigation understanding.

Content tab

Settings group

Active tab: determines the tab to display when page loads. e.g: “1” will display first tab on page load.

Animation group

Tabs entrance transition can be customized using opacity, translate X and translate Y controls at pleasure. They will share the duration and CSS easing set.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.