Animated Feedback Alert Cards

These Animated Feedback Alert Cards provide a high-polish way to communicate application states like success, ongoing processes, and errors. Each card utilizes a cohesive design system of rounded geometry and custom SVG icons that “draw” themselves into existence, offering immediate and delightful tactile feedback to the user.

Core Technique

The visual magic of this component lies in the synchronized entrance of the container and the sequential “drawing” of the internal SVG elements.

1. SVG Path Animation

To achieve the hand-drawn effect for checkmarks and icons, the code uses the stroke-dasharray and stroke-dashoffset technique. A custom SCSS mixin named sdo (Stroke Dash Offset) handles the heavy lifting, allowing for reusable timing and delay logic across different paths.

@mixin sdo($s, $t, $d) {
  stroke-dasharray: $s;
  stroke-dashoffset: $s;
  will-change: stroke-dashoffset;
  animation: sdo $t ease-out $d both;
}

@keyframes sdo {
  to { stroke-dashoffset: 0; }
}

// Example usage on a checkmark
.success .icon path {
  @include sdo(26.661, 250ms, 700ms);
}

2. 3D Spatial Entrance

Instead of a simple fade-in, the cards enter the stage with a 3D transformation. By combining rotateX, rotateY, and translateY, the cards appear to “pop” out of the background. The cubic-bezier(0, .6, .3, 1) easing gives the movement a snappy, elastic feel that is characteristic of modern high-end mobile interfaces.

3. State-Specific Micro-animations

• Success: Gentle drawing of a smiley mouth and checkmark.
• Working: An infinite ellipsis animation using three circles with staggered opacity cycles (ellipsis-1, ellipsis-2, etc.).
• Error: A high-frequency jitter animation that simulates a physical vibration, instantly signaling that something went wrong.

The use of will-change helps optimize the path animations on mobile browsers, keeping the frame rate smooth even during complex draw operations.

Browser Support

This component relies on standard CSS properties and SVG rendering, ensuring broad compatibility across all modern evergreen browsers.