Multi state badge

Introduction

The Multi-state Badge example shows how to create a component that smoothly animates between different states. This pattern is commonly used in UIs to provide visual feedback during form submissions, network requests, or any process with multiple stages.

In this tutorial, we'll learn to use:

• motion components for creating animatable elements
• AnimatePresence for coordinating the entrance and exit of components
• The animate function for triggering imperative animations
• useTime and useTransform motion value hooks for creating continuous animations

Using Motion for these animations offers significant advantages over standard CSS transitions. Motion handles the complex orchestration of multiple elements entering and exiting simultaneously, manages element measurement for dynamic content, and provides a declarative API for SVG path animations that would otherwise require complex JavaScript.