Skip to content
staticview

Animated Select

A priority field that swaps the default height reveal for a circular reveal that spreads from the trigger. Animate the expander part under the flyout's --opening and --closing states.

Reduced Motion

Your system is set to reduce motion, so the animations shown on this page will not play for you.

Code

The following example assumes that you have imported the component and set up the theme.

Animated Select
<div class="priority-picker">
18 collapsed lines
  <label for="priority-trigger">Priority</label>


  <sv-select close-on-select value="medium">
    <sv-flyout class="priority-flyout">
      <button id="priority-trigger" type="button" class="trigger" slot="trigger">
        <span data-select-label></span>


        <svg class="chevron" aria-hidden="true" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
          <path d="M480-360 280-560h400L480-360Z"></path>
        </svg>
      </button>


      <button value="low">Low</button>
      <button value="medium">Medium</button>
      <button value="high">High</button>
      <button value="urgent">Urgent</button>
    </sv-flyout>
  </sv-select>
</div>


<style>
78 collapsed lines
  .priority-picker {
    display: grid;
    gap: 0.5em;
    inline-size: min(100%, 16rem);
    margin-inline: auto;
    color: var(--sv-gray-2);


    .trigger {
      display: flex;
      gap: 0.5em;
      align-items: center;
      justify-content: space-between;
    }


    .chevron {
      flex: none;
      inline-size: 1.25em;
      block-size: 1.25em;
      fill: currentcolor;
      rotate: -90deg;
      transition: rotate var(--sv-flyout-open-dur) var(--sv-flyout-open-ease);
    }


    .priority-flyout {
      --sv-flyout-open-dur: 450ms;
      --sv-flyout-close-dur: 150ms;
      --sv-flyout-open-ease: cubic-bezier(0.22, 1, 0.36, 1);
      --sv-flyout-close-ease: cubic-bezier(0.4, 0, 1, 1);


      /* Grow from the edge that touches the trigger. */
      &::part(expander) {
        transform-origin: center var(--sv-flyout-anim-offset-y);
      }


      &:state(--opening)::part(expander) {
        animation: priority-enter var(--sv-flyout-open-dur) var(--sv-flyout-open-ease);
      }


      /* Keep the list at full height while it fades out. */
      &:state(--closing)::part(expander) {
        grid-template-rows: 1fr;
        animation: priority-exit var(--sv-flyout-close-dur) var(--sv-flyout-close-ease);
      }


      @media (prefers-reduced-motion: reduce) {
        --sv-flyout-open-dur: 0s;
        --sv-flyout-close-dur: 0s;
      }
    }


    sv-flyout:state(--opened) {
      .trigger {
        border-color: var(--sv-accent);
      }


      .chevron {
        rotate: 0deg;
      }
    }
  }


  @keyframes priority-enter {
    from {
      clip-path: ellipse(0% 0% at center var(--sv-flyout-anim-offset-y));
      scale: 0.96;
    }


    to {
      clip-path: ellipse(71% 142% at center var(--sv-flyout-anim-offset-y));
    }
  }


  @keyframes priority-exit {
    to {
      opacity: 0;
      scale: 0.95;
    }
  }
</style>