Dynamics.applyTether()

Elements float or fall freely until they exceed the tether's length, at which point an elastic spring snaps them back, simulating a physical bungee cord or string!

---

1. Basic Gravity Tether

In this demo, the box is pulled down by gravity. However, if the cursor gets more than 100px away, the invisible bungee cord snaps taut and pulls it back.

Move your mouse around to drag the box!

60 FPS

import { Dynamics } from 'animx/dynamics'

Dynamics.applyTether('.box', {
  target: 'pointer',       
  length: 100,             // The resting slack length of the cord
  stiffness: 150,          // The snap-back tension
  damping: 10,             // Air friction
  gravity: 500,            // Constant downward pull
  onUpdate: ({ targetX, targetY, states }) => {
    // We can easily draw a visual SVG line to the target!
    drawLine(targetX, targetY, states[0].px, states[0].py);
  }
});

---

2. Zero-Gravity Space Tether

If you set gravity: 0, the object floats freely where you leave it—until you move the mouse too far away and yank the tether.

Yank the mouse quickly!

60 FPS

Dynamics.applyTether('.ship', {
  target: 'pointer',
  length: 80, 
  stiffness: 180,
  damping: 5,   // Very bouncy!
  gravity: 0    // Space simulation
});

---

3. Multi-Node Chandelier

You can pass multiple elements into applyTether and they will all attach to the single target independently.

60 FPS

Dynamics.applyTether('.nodes', {
  target: 'pointer',
  length: 120,
  gravity: 800
});

---

Properties & Methods

Configuration Options

Option	Type	Default	Description
target	string | Element	'pointer'	The anchor point the cord is attached to. Use 'pointer' for the mouse, or a DOM element to tether to another element's center.
length	number	100	The "slack" of the cord, in pixels. The tether has no effect while the element is closer than this distance to the target. Only when the element drifts farther away does the spring snap taut and pull it back.
stiffness	number	150	How strongly the cord snaps back when taut. Higher values = a stiffer, snappier bungee cord that yanks the element back fast. Lower values = a very elastic, stretchy cord.
damping	number	10	Air friction. Higher values stop the bouncing quickly. Lower values cause wild bouncing after the cord goes tight.
mass	number	1	How heavy the element feels. Higher mass = slower to respond and more momentum when it finally moves.
gravity	number	980	A constant downward pull in px/s². 0 = zero gravity (space simulation). 980 = Earth-like, the element hangs down from the target.
onUpdate	Function	null	A function called every frame. Useful for drawing an SVG line from the target to the element.

Return Instance

Method	Description
kill()	Stops the tether and cleans up event listeners.