Spring

<script setup lang="ts">
import { Spring, SpringElement, SpringProvider } from '@animate-ui/vue/primitives/spring'
</script>

<template>
  <SpringProvider>
    <Spring class="z-10 text-muted-foreground" />
    <SpringElement class="relative z-20">
      <div
        aria-label="Drag me"
        class="flex size-14 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground shadow-md select-none"
      >
        Drag
      </div>
    </SpringElement>
  </SpringProvider>
</template>

InstallationCopy Anchor Link

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

UsageCopy Anchor Link

<script setup lang="ts">
import { Spring, SpringElement, SpringProvider } from '@animate-ui/vue/primitives/spring';
</script>

<template>
  <SpringProvider>
    <Spring class="text-muted-foreground" />
    <SpringElement>
      <img src="/avatar.png" alt="Avatar" draggable="false" />
    </SpringElement>
  </SpringProvider>
</template>

AnimationCopy Anchor Link

• Dragging stretches a coil between the element's place and the element. The coil tightens as it stretches.
• On release, the element springs back with a bounce, the coil following it.
• Spring is a full-viewport SVG that never catches the pointer.
• Under reduced motion, the element is back in place at once on release.

API ReferenceCopy Anchor Link

SpringProviderCopy Anchor Link

SpringPathConfigCopy Anchor Link

SpringCopy Anchor Link

The coil. Its color is currentColor.

SpringElementCopy Anchor Link

useSpringCopy Anchor Link

Returns the spring state: the x/y and springX/springY motion values, the isDragging ref, a path() getter for the coil and the child ref.

CreditsCopy Anchor Link

• Inspired by Anh's post.