Press example for Svelte

An example of using Motion's press function in Svelte with an attachment. press() handles pointer and keyboard presses, and its cleanup function removes the listeners when the element unmounts.

<script>
  import { animate, press } from "motion"

  function pressScale(element) {
    return press(element, () => {
      animate(element, { scale: 0.8 }, { type: "spring", stiffness: 1000 })

      return () =>
        animate(element, { scale: 1 }, { type: "spring", stiffness: 500 })
    })
  }
</script>

<button class="box" aria-label="Press me" {@attach pressScale}></button>

<style>
  .box {
    width: 100px;
    height: 100px;
    padding: 0;
    border: none;
    background-color: var(--hue-6);
    border-radius: 10px;
    cursor: pointer;
  }

  .box:focus-visible {
    outline: 2px solid var(--hue-6);
    outline-offset: 2px;
  }
</style>

Source code