Dynamics.springTo()

Need pointer interaction?

• To make elements automatically track the pointer, use applyMagnetic() or applyFollower() instead!

Animates an element to a target value using real spring physics (Hooke's Law). This creates a very natural, elastic settling motion.

Unlike a normal animation with a 'bouncy' effect, a true spring recalculates its speed constantly. If you interrupt it (like clicking a new spot before it finishes), it smoothly changes direction using its current momentum instead of snapping.

---

1. Positional Spring

Click anywhere in the stage below. The box will recalculate its momentum and spring towards your cursor perfectly.

Click anywhere in the stage!

60 FPS

import { Dynamics } from 'animx/dynamics'

Dynamics.springTo('.box', { x: 300, y: 150 }, {
  stiffness: 180, // Spring tension (higher = faster snap)
  damping: 12,    // Resistance (lower = more wobbly/bouncy)
  mass: 1         // Element weight (higher = slower acceleration)
})

---

2. Non-Positional Springs (UI Modals)

springTo isn't just for moving things. You can spring any property, including scale, rotate, and opacity. High stiffness and high damping create excellent UI popups that feel snappy but don't bounce awkwardly.

Modal Content

60 FPS

// Overdamped spring for a clean, professional popup
Dynamics.springTo('.modal', { scale: 1, opacity: 1 }, {
  stiffness: 300,
  damping: 15 
});

---

3. Multi-Property Wobbly Jello

By lowering the damping, you can spring multiple properties at once to create fun, jelly-like transitions. Click the stage to randomize the blob.

Click to randomize!

60 FPS

Dynamics.springTo('.blob', {
  x: Math.random() * 200,
  rotate: Math.random() * 180,
  scale: Math.random() * 2
}, {
  stiffness: 120,
  damping: 6 // Super bouncy!
});

---

Properties & Methods

Configuration Options

Option	Type	Default	Description
stiffness	number	150	How tightly the spring pulls toward the target. Think of it as the spring's tension. 50 = a loose rubber band that drifts lazily. 300 = a rigid metal spring that snaps instantly.
damping	number	15	How much the spring is resisted — like air friction. 5 or lower = very wobbly, overshoots massively (jello effect). 10–15 = gentle overshoot and settle. 20+ = no overshoot at all, glides smoothly to a stop (overdamped).
mass	number	1	How heavy the element feels. Higher mass makes it slower to accelerate and slower to stop, like pushing a heavy object. 0.5 = very light and responsive. 3 = heavy and sluggish.
onUpdate	Function	null	A function called every frame while the spring runs.
onComplete	Function	null	A function called when the spring comes to a complete stop.

Return Instance

Method	Description
kill()	Stops the spring immediately.