Bricksmotion Components
  • Getting Started
  • Setup
    • Where is my license key?
    • Activate you license within Bricksforge
  • Using components
    • Bricksforge One-Click
    • Bricks Structure
    • Activate "Event Panel"
    • Manual Importing Timelines and Events
    • Locked Classes
    • Reassign Timelines
    • Loading Conditions
  • Components
    • HEROES
      • Hero #1
      • Hero #2
      • Hero #3
      • Hero #4
      • Hero #5
      • Hero #6
      • Hero #7
      • Hero #8
      • Hero #9
      • Hero #10
    • SCROLL SCENES
      • Sticky Sections #1
      • Vertical Scroll #1
      • Scroll Scene #1
      • Scroll Scene #2
      • Scroll Scene #3
      • Scroll Scene #4
      • Scroll Scene #6
      • Scroll Scene #7
      • Scroll Scene #8
      • Scroll Scene #9
    • BUTTONS
      • Button #1
      • Button #2
      • Button #3
      • Button #4
      • Button #5
      • Button #6
      • Button #7
    • TABS
      • Tabs #3
      • Tabs #4
    • PROJECTS
      • Projects #1
      • Projects #2
      • Projects #3
      • Projects #4
      • Projects #5
      • Projects #6
      • Projects #7
    • CTA
      • CTA #1
      • CTA #2
    • CARDS
      • Cards #1
      • Cards #2
    • MENUS
      • Bottom Nav #1
      • Mega Menu #1
      • Full Screen Menu #2
      • Full Screen Menu #3
    • CUSTOM CURSORS
      • Custom Cursor #1
    • LOADING SCREENS
      • Loading Screen #1
      • Loading Screen #2
      • Loading Screen #3
    • TEXT
      • Text Hover #1
      • Split Text #2
    • IMAGE
      • Image Tilt #1
      • Image Reveal #1
      • Image Reveal #2
      • Image Reveal #3
    • PROGRESS BARS
      • Progress Bar #1
      • Progress Bar #2
Powered by GitBook
On this page
  • Component Structure
  • Animation Structure
  • Event Structure
  1. Components
  2. TABS

Tabs #3

Component Structure

  • 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.

Animation Structure

  • 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.

Event Structure

  • 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.

PreviousTABSNextTabs #4

Last updated 1 year ago