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
  • Events
  1. Components
  2. TABS

Tabs #4

Component Structure

  • TB4 COMPONENT (Section): Serves as the main wrapper for the tabs component, facilitating alignment and spacing. It is styled with the CSS class tb4__component, which may define height, alignment, or other properties to ensure the component occupies the full viewport height and is centered.

  • TB4 CONTAINER (Container): Nested within the TB4 COMPONENT, this container holds the tabs and content sections. It is associated with the tb4__container CSS class for additional styling flexibility.

  • TB4 ACCORDEON (Tabs-nested): This element acts as the accordion for holding tabs content, ensuring a responsive layout. Styled with tb4__tabs, it defines the border, layout direction, and spacing between tabs.

  • TB4 CONTENT (Block): These blocks contain the individual content for each tab, hidden or shown based on active tab selection. Each content block is styled with tb4__content for consistent borders and padding.

  • TB4 CONTENT INNER (Block): Inside each TB4 CONTENT, this layer serves to structure the content further, providing a foundation for images and text. It uses the tb4__content-inner class for width, height, and positioning.

  • TB4 IMAGE (Image): These elements display images within each content section. The tb4__image class applies styles for width, height, and object-fit properties.

  • TB4 TEXT WRAPPER (Div): Wraps text elements, such as headings and paragraphs, within the content sections. Styled with tb4__content-text, it positions and styles the text content.

  • TB4 MENU (Block): Contains the navigation for the tab component, including menu headings and navigation items. Styled with tb4__menu for layout adjustments.

  • TB4 MENU TITLE (Div): Individual titles within the menu, allowing for interaction with the tabs. These are styled with tb4__menu-title for width and positioning.

Animation Structure

  • TB4 - CONTENT IMAGE: Targets images within the tabs, animating from a clipped state to fully visible. The animation emphasizes the content's appearance with a subtle scale effect, enhancing visual interest.

  • TB4 - CONTENT TEXT: Animates the text content's appearance within each tab. It scales and fades text in for a smooth transition, making the content appear dynamically as the tab is selected.

Events

  • TB4 - IMG: Utilizes a mutation observer to trigger animations when the tab's content changes. It restarts the "TB4 - CONTENT IMAGE" and "TB4 - CONTENT TEXT" animations, ensuring that content transitions are initiated by user interaction with the tabs.

PreviousTabs #3NextPROJECTS

Last updated 1 year ago