Tabs #3

TB3 COMPONENT (section): This serves as the primary container, styled with .tb3__component, ensuring that the tabs occupy the full viewport height and are centered within the view.
TB3 CONTAINER (container): Acts as the layout manager within the component, applying .tb3__container styling to organize content effectively.
TB3 TABS (tabs-nested): The core of the component, where the tab functionality is initialized, utilizing .tb3__tabs for the base styling.
TB3 MENU (block): Houses the tab menu items, facilitating navigation between tabs, marked with .tb3__menu.
- TB3 MENU ITEM (div): Individual tab selectors, each wrapped in .tb3__menu-item.
- TB3 MENU TEXT (text-basic): The text labels for each tab, carrying .tb3__menu-text styling.
TB3 CONTENT (block): The container for the content sections corresponding to each tab, adorned with .tb3__content.
- TB3 CONTENT INNER (block): Encloses the specific content for each tab, including images and text, highlighted with .tb3__content-inner.
- TB3 IMG (image): Visual elements within tab content, using .tb3__img to ensure proper display and scaling.
- TB3 CONTENT TITLE (heading) and TB3 CONTENT TEXT (div): Textual content for each tab, offering detailed information or descriptions, styled respectively with .tb3__content-title and .tb3__content-text.

TB3 - CONTENT TEXT: Animates the content text scaling from 0 to 1, providing a smooth reveal effect for textual information within each tab.
TB3 - CONTENT TITLE: Fade-in and positional animation for the content titles, enhancing the visual transition between tabs.
TB3 - CONTENT IMAGE: Applies a clipping path animation to images within tabs, coupled with a slight rotation for a dynamic unveiling of visual content.

TB3 - IMG: An event-based trigger that restarts the defined animations (TB3 - CONTENT IMAGE, TB3 - CONTENT TITLE, and TB3 - CONTENT TEXT) upon tab selection, ensuring that each content reveal is accompanied by engaging animations for an immersive user experience.

Last updated 1 year ago