Sliding Line Hamburger Menu Animation

This is a Sliding Line Hamburger Menu Animation. It reinvents the standard three-bar toggle by using internal pseudo-element sliding instead of simple opacity changes. Its function is to provide a high-end, staggered interaction that signals navigation states with mechanical precision.

Specs

• Weight: < 1 KB (CSS + JS).
• Performance: Ultra-high. Animates only transform and left/right properties, allowing the browser to handle transitions on the GPU.
• Theming / Customization: Centralized $hamburgerWidth variable in SCSS for easy scaling.
• Responsiveness: Native. Width is fixed but relative to its container.
• Graceful Degradation: Functional. If JavaScript fails, the hover “sliding” effect still works via CSS, though the state won’t lock to “active.”

Anatomy

The component is built using a layered approach that hides the complexity behind a minimalist facade.

• HTML (The Skeleton): A nested structure where .hamburger-line acts as a viewing window (using overflow: hidden) for its internal sliding parts.
• CSS (The Skin): SCSS logic defines the “ink.” Each line contains ::before and ::after pseudo-elements. On hover, the “old” line slides out while the “new” line slides in from the opposite side.
• JS (The Nervous System): A simple event listener that toggles the active class, triggering the final transformation into an “X” shape.

Logic

The “heart” of the interaction is the staggered delay loop combined with a precise cubic-bezier curve.

@for $i from 0 through 20 {
  &:nth-child(#{$i + 1}) {
    &:before, &:after {
      transition-delay: 0.05s * $i;
    }
  }
}

This logic ensures that even with only two lines, the animation doesn’t happen simultaneously. The slight 50ms offset creates a sense of physical momentum, making the menu feel like a mechanical part where one latch releases slightly before the next.

Feel

Premium and intentional. The use of cubic-bezier(0.19, 1, 0.22, 1) provides a “snappy” start with a long, smooth deceleration. It feels less like a digital button and more like a high-end physical switch clicking into place.