scroll-tabs.css

scroll-tabs.css

/* === Sticky Tab Scroll Section Styles === */

/* Main wrapper for the scroll-based tab system */
.scroll-tabs {
    position: relative; /* Establishes a reference point for absolute or sticky positioning within */
}

/* Makes the row inside .scroll-tabs sticky so it stays fixed while scrolling */
.scroll-tabs .et_pb_row {
    position: -webkit-sticky; /* For Safari support */
    position: sticky;         /* Standard sticky positioning */
    top: 100px;               /* Starts sticking 100px from the top of the viewport */
    z-index: 10;              /* Ensures it stays above other elements while scrolling */
}

/* Prevents the tab content container from overflowing when switching tabs */
.scroll-tabs .et_pb_tabs_contents {
    overflow: hidden; /* Ensures clean transitions by clipping animated elements */
}

/* === Tab Panel Visibility Management === */

/* Hide all tabs by default so only the active one is shown */
.scroll-tabs .et_pb_tab {
    display: none; /* Remove from layout flow */
    opacity: 0;    /* Invisible even if accidentally shown */
}

/* Styles for the currently active tab */
.scroll-tabs .et_pb_tab.active-tab {
    display: block; /* Reinsert into layout */
    opacity: 1;     /* Make fully visible */
    animation: slideAndFadeIn 0.6s ease-out forwards; /* Apply slide-in animation */
}

/* === Slide and Fade Animation === */

/* Animation for making a tab slide in from the right and fade into view */
@keyframes slideAndFadeIn {
  from {
    opacity: 0;                /* Start fully transparent */
    transform: translateX(40px); /* Start 40px to the right */
  }
  to {
    opacity: 1;                /* End fully visible */
    transform: translateX(0);  /* End at original position */
  }
}