Flex Split View - Panel Push Animation

by nehamahajan

HTML

<div class="split-view" id="splitView">
    
    <!-- Left Panel (Initially Hidden) -->
    <div class="panel left-panel">
      <div class="panel-content">
        <h2>Left Panel</h2>
        <p>I just pushed the right panel over!</p>
        <button class="toggle-btn" onclick="togglePanels()">Push Back</button>
      </div>
    </div>

    <!-- Right Panel (Initially Full Screen) -->
    <div class="panel right-panel">
      <div class="panel-content">
        <h2>Right Panel</h2>
        <p>This panel occupies the screen first.</p>
        <button class="toggle-btn" onclick="togglePanels()">Bring Left Panel</button>
      </div>
    </div>

  </div>

CSS

/* Reset margins and set up full-viewport container */
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
    }

    /* Container blocks out full screen and hides off-screen content */
    .split-view {
      display: flex;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    /* Base rules for both panels */
    .panel {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* Smooth layout transition on flex-basis */
      transition: flex-basis 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* --- INITIAL STATE --- */
    /* Left panel starts completely collapsed */
    .left-panel {
      flex-basis: 0%;
      background-color: #2563eb;
      color: white;
      overflow: hidden; /* Hides content while width is 0 */
    }

    /* Right panel starts taking up the entire screen */
    .right-panel {
      flex-basis: 100%;
      background-color: #f3f4f6;
      color: #1f2937;
    }

    /* Inner wrappers preserve layout dimensions during width shifts */
    .panel-content {
      min-width: 320px;
      padding: 40px;
      text-align: center;
    }

    /* Control Button Layout */
    .toggle-btn {
      margin-top: 20px;
      padding: 12px 24px;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .left-panel .toggle-btn {
      background-color: white;
      color: #2563eb;
    }

    .right-panel .toggle-btn {
      background-color: #2563eb;
      color: white;
    }

    /* --- ANIMATED PUSH STATE --- */
    /* When active, panels shift seamlessly to a 50/50 split */
    .split-view.active .left-panel {
      flex-basis: 50%;
    }

   ...

JavaScript

// Simple toggle function to shift classes
    function togglePanels() {
      const container = document.getElementById('splitView');
      container.classList.toggle('active');
    }