Material Design Decelerate Easing for Entering Elements
Use the Material Design decelerate curve cubic-bezier(0, 0, 0.2, 1) for elements entering the screen. No initial acceleration — just smooth deceleration into position.
Detailed Explanation
Material Design Decelerate Curve
The decelerate curve is designed for elements that enter the viewport — sliding in from off-screen, fading in, or growing from a seed point.
The Values
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
Both x1 and y1 are 0, meaning the curve starts at maximum velocity with no ramp-up. The element appears to already be in motion when it first becomes visible. It then gradually slows down as it approaches its final position, guided by the second control point at (0.2, 1).
Why No Acceleration Phase?
When an element enters from off-screen, the user doesn't see the beginning of its journey. Starting at full speed creates the illusion that the element was already moving before it became visible, which feels more natural than seeing it start from a standstill within the viewport.
Comparison with Standard Curve
Standard: ——slow——→ fast ——→ slow
Decelerate: fast ——————————→ slow
Accelerate: slow ——————————→ fast
Code Example
.dialog {
transform: translateY(100%);
transition: transform 350ms cubic-bezier(0, 0, 0.2, 1);
}
.dialog.visible {
transform: translateY(0);
}
This pattern is commonly used for bottom sheets, snackbars, and side navigation drawers in Material-styled applications.
Use Case
Use the decelerate curve when elements enter the user's view — bottom sheets sliding up, snackbars appearing, navigation drawers opening, or any component that transitions from off-screen or invisible to its final on-screen position.