Animate UI

Spring

A flexible, animated spring component that attaches a draggable element to its origin with a spring line.

Made by arhamkhnz
Edit on GitHub

Installation

Usage

<SpringProvider>
  <Spring />
  <SpringElement>
    <p>Hello</p>
  </SpringElement>
</SpringProvider>

Note: Add draggable={false} to your element (avatar, image, etc.) when passing it as children. This prevents the browser's native drag image from interfering with the spring drag animation.

API Reference

SpringProvider

PropTypeDefault
children
React.ReactNode
-
dragElastic?
number
0.2
transition?
SpringOptions
{ type: "spring", stiffness: 200, damping: 16 }
pathConfig?
SpringPathConfig
{}

Spring

PropTypeDefault
...props?
React.SVGProps<SVGSVGElement>
-

SpringElement

PropTypeDefault
children
React.ReactElement
-
...props?
HTMLMotionProps<"div">
-

Credits

Built by Skyleen. The source code is available on GitHub.