@jacobberglund/animated-swap

A web component that animates between two slotted states with a smooth sliding transition. Perfect for "Copy → Copied!" feedback patterns.

Installation

npm install @jacobberglund/animated-swap

Usage

import "@jacobberglund/animated-swap";

<button onclick="this.querySelector('animated-swap').swapped = true">
  <animated-swap auto duration="2000">
    <span>Copy</span>
    <span slot="swap-to">Copied!</span>
  </animated-swap>
</button>

Attributes

| Attribute | Type | Description | | ---------- | --------- | ------------------------------------------------ | | swapped | boolean | Toggles to the swapped state | | auto | boolean | Auto-resets to initial state after duration | | duration | number | Reset delay in ms (default: 2500) |

CSS Custom Properties

| Property | Default | Description | | ---------------------------- | ---------------------------- | ---------------------------- | | --swap-offset | 100% | Vertical offset for slide | | --swap-duration | 500ms | Transform transition duration| | --swap-opacity-duration | var(--swap-duration) | Opacity transition duration | | --swap-easing | cubic-bezier(0, 0, 0, 1.03)| Easing function |

CSS Parts

| Part | Description | | ----------- | ------------------------------- | | swap-from | Container for the default slot | | swap-to | Container for the swap-to slot |