Slide-In Animation Easing for Panels and Drawers

Slide-In Panel Easing

Side panels, navigation drawers, and off-canvas menus need an easing curve that makes the sliding motion feel natural — fast entrance with a gentle stop.

Recommended Curve

transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);

This custom curve provides an even faster start than the Material Decelerate curve, with an extended, smooth deceleration. The result feels like the panel was "thrown" into view and then caught by friction.

Comparing Slide-In Curves

Curve	Values	Character
ease-out	(0, 0, 0.58, 1)	Standard, slightly stiff
Material Decelerate	(0, 0, 0.2, 1)	Google-style, natural
Custom Slide-In	(0.05, 0.7, 0.1, 1)	Fast entry, very smooth landing

Code Example: Navigation Drawer

.drawer {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 280px;
  transform: translateX(-100%);
  transition: transform 350ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.drawer.open {
  transform: translateX(0);
}

Slide-Out (Closing)

For the closing animation, use a complementary accelerating curve:

.drawer.closing {
  transform: translateX(-100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1);
}

The closing animation should be faster (250ms vs 350ms) and use an accelerating curve so the panel appears to speed up as it leaves. Users are less patient during dismissal than during entrance.

Performance Tips

Always animate transform instead of left / right — transforms are GPU-accelerated and won't trigger layout recalculations. Add will-change: transform for browsers that benefit from the hint.