Motion has made web animation easier than ever. Animations are integral to modern web design, driving attention and elevating UI/UX.

Source code here.

The following design is inspired by Obviant. It showcases a button animation consisting of 3 elements:

• Button Fill Animation
• Content Slide Animation
• Button List Cycle

With Motion, Tailwind, and Shadcn, these are quick to implement. Let's start with the foundation: a button fill animation.

This component renders a button that visually “fills up” with color when active. The motion.span inside expands its width from 0 to 100% over a set duration, creating a progress-bar like effect behind the button label.

Once the fill animation completes, it can trigger a onComplete callback, making it useful for timed actions like auto-progress buttons. The onClick callback can be used to restart the animation. We will cover these callbacks in section 3.

This component has an enter and exit slide animation. The onAnimationComplete callback fires when the enter animation completes, giving us a way to know when to start the next animation.

AnimatePresence with key=contentKey ensures that React re-mounts the component and triggers the exit animation.

The parent uses activeLabel state as the React key to trigger the unmount the content and trigger the exit animation.

Once the fill animations completes we use onComplete to transition to the next animation. We also support starting a manual animation via onClick.