Dynamics.applyFollower()

Looking for other Spring Effects?

• If you want an element to attract to the pointer only when you get close to it (like a magnetic button), use applyMagnetic().
• If you just want to spring an element to a specific coordinate programmatically, use springTo().

Create objects that chase your pointer or trail behind other elements! applyFollower() uses spring physics to chain elements together so they follow a leader in a natural, rubber-band style.

---

1. Pointer Snake

By setting the leader to 'pointer', the first element in the array will chase your pointer (mouse or touch). If you pass an array of multiple elements, each subsequent element will follow the one directly in front of it, creating a fluid snake or tail effect!

Move your pointer to make the snake follow you!

60 FPS

import { Dynamics } from 'animx/dynamics'

Dynamics.applyFollower('.dots', {
  leader: 'pointer', 
  stiffness: 160,    // Spring tension between trailing nodes
  damping: 14        // Resistance
})

---

2. Element Trailing

You don't just have to follow the pointer. The leader property accepts any DOM element reference or selector! In this example, the blue leader box is animated using a standard AnimX timeline, and the green trailers use physics to chase it.

Lead

60 FPS

// Create a repeating timeline that moves the leader in a square
const tl = AnimX.timeline({ repeat: -1 });
tl.animate('.leader-box', { x: 200, y: 0, duration: 1, ease: 'linear' })
  .animate('.leader-box', { x: 200, y: 150, duration: 1, ease: 'linear' })
  .animate('.leader-box', { x: 0, y: 150, duration: 1, ease: 'linear' })
  .animate('.leader-box', { x: 0, y: 0, duration: 1, ease: 'linear' });

// Apply the follower physics to the trailers, telling them to track the leader
Dynamics.applyFollower('.trailer-boxes', {
  leader: '.leader-box',
  stiffness: 120,
  damping: 10
});

---

3. Loose Rubber-Band Chains

You can completely change how the follower feels by adjusting the physics properties. Lowering the stiffness and damping while increasing the mass creates a heavy, loose, bouncy chain that lags far behind the leader!

Move your pointer rapidly to see the loose rubber-band effect!

60 FPS

Dynamics.applyFollower('.chain-nodes', {
  leader: 'pointer',
  stiffness: 40,   // Very loose springs
  damping: 4,      // Very low friction (bounces a lot)
  mass: 1.5        // Heavy nodes
});

---

Properties & Methods

Configuration Options

Option	Type	Default	Description
leader	string | Element	'pointer'	Who the first element should follow. Use 'pointer' to track the user's cursor/touch, or pass a CSS selector/DOM element.
stiffness	number	120	The tension of the springs connecting the elements. Higher numbers mean the elements group tighter and snap faster.
damping	number	15	The resistance of the springs. Lower numbers make the chain wobbly and bouncy.
mass	number	1	The weight of the elements. Heavier items react more sluggishly and lag further behind.

Engine Methods

Calling applyFollower() returns an object you can use to control the simulation:

Method	Description
kill()	Stops the physics engine immediately and cleans up any pointer listeners.