Notify

Slides in from the bottom edge. Fades and drops on exit.

Live demo

The preset here changes the whole site. Slow motion and reduced motion change this stage only.

Reduced motion

Frame by frame

Every frame of the movement, on top of each other. Wide gaps are fast. Ghosts past the dashed outline are overshoot. It updates with the preset.

24 frames at 60 fps. Settles in 383 ms, overshoots 0.3%.

When to use

Toasts and banners: messages that arrive without a click. The toast slides in distance.lg from the bottom edge, the largest travel in the kit, so it draws the eye. On exit it fades and drops a short distance.sm.

Put toasts in a region with role="status", so screen readers announce them.

Recipe

Toasts and banners. Slides in distance.lg from the bottom edge and fades in. Exit fades and drops distance.sm.

States of the notify recipe
State	Property	Token	Now
initial	opacity	literal	0
	y	{distance.lg}	30
animate	opacity	literal	1
	y	literal	0
exit	opacity	literal	0
	y	{distance.sm}	5
transition	Movement (spring)	{spring.default}	stiffness 511 · damping 40
transition	Fade duration	{duration.fast}	132ms
transition	Fade easing	{easing.enter}	cubic-bezier(0, 0, 0, 1)
transition	Exit duration	{duration.fast}	132ms
transition	Exit easing	{easing.exit}	cubic-bezier(0.3, 0, 1, 1)

Tokens used

spring.default stiffness 511 · damping 40
duration.fast 132ms
easing.enter cubic-bezier(0, 0, 0, 1)
easing.exit cubic-bezier(0.3, 0, 1, 1)
distance.lg 30px
distance.sm 5px

Code

/* notify: Toasts and banners. Slides in distance.lg from the bottom edge and fades in. Exit fades and drops distance.sm.
   Use: <div class="motif-notify" role="status">. Exit with data-state="closed". */
.motif-notify {
  transition:
    opacity var(--motif-duration-fast) var(--motif-ease-enter),
    transform var(--motif-spring-default-duration) var(--motif-spring-default),
    filter var(--motif-duration-fast) var(--motif-ease-enter),
    clip-path var(--motif-spring-default-duration) var(--motif-spring-default);
}
@starting-style {
  .motif-notify {
    opacity: 0;
    transform: translateY(var(--motif-distance-lg));
    filter: none;
    clip-path: none;
  }
}
.motif-notify[data-state="closed"] {
  opacity: 0;
  transform: translateY(var(--motif-distance-sm));
  filter: none;
  clip-path: none;
  transition:
    opacity var(--motif-duration-fast) var(--motif-ease-exit),
    transform var(--motif-duration-fast) var(--motif-ease-exit),
    filter var(--motif-duration-fast) var(--motif-ease-exit),
    clip-path var(--motif-duration-fast) var(--motif-ease-exit);
}

/* Reduced motion: the variable overrides at the end of motif.css set
   travel to 0, scale to 1, and blur to 0, so this recipe needs no extra rule. */

Reduced motion

No slide. The toast fades in and out at duration.fast. role="status" still announces it.
Fades take 132ms (duration.fast), so the state change stays visible.
Turn on the Reduced motion box under the demo to preview it, or set your system to reduce motion.