Dynamics.applyMagnetic()

Need something different?

• To magnetically attract an element to another element, use applyFollower().
• To spring an element to a specific coordinate programmatically, use springTo().

Create elements that are magnetically attracted to the user's pointer! applyMagnetic() pulls elements toward the pointer coordinate during interaction, and uses a spring force to snap them back to their original position when the pointer leaves or the touch ends.

---

1. Basic Magnetic Tracking

By setting the trigger to a larger container (like the entire stage), you can make the element start tracking the pointer from far away. When the pointer gets close enough, the magnetism kicks in!

Move your pointer near the button.

60 FPS

import { Dynamics } from 'animx/dynamics'

Dynamics.applyMagnetic('.btn', {
  power: 0.6,     // Follows the mouse 60% of the distance
  stiffness: 150, // Snap-back tension
  damping: 15,    // Snap-back resistance
  trigger: '#stage' // Active area
})

---

2. Lifecycle Events (onEnter / onLeave)

You can trigger custom code exactly when the pointer enters or leaves the magnetic radius using the onEnter and onLeave callbacks. This is perfect for fading in a background highlight or playing a sound effect.

Bring the pointer near the button to see the glowing aura ignite!

60 FPS

Dynamics.applyMagnetic('.btn', {
  power: 1.0,     // Exact 1:1 cursor tracking
  radius: 100,    // Only active within 100px of the button's center
  stiffness: 200,
  damping: 15,
  onEnter: () => console.log('Entered radius!'),
  onLeave: () => console.log('Left radius!')
})

---

3. Tuning Damping (Wobbly Elasticity)

Want to make the magnet feel like jello? Just lower the damping property! Lower damping means the spring has less resistance, resulting in a wobbly, bouncing effect as the element tries to catch up to your pointer.

Move your pointer rapidly over the button!

60 FPS

Dynamics.applyMagnetic('.btn', {
  power: 0.8,
  stiffness: 100,
  damping: 2 // Extremely low damping creates a bouncing jelly effect
});

---

4. Interactive Icon Dock

Because applyMagnetic() runs smoothly in the background, you can safely layer standard AnimX.animate() tweens right on top of it! Here, we apply independent magnetism to a row of icons, while also scaling them up when interacted with.

Sweep your pointer across the icons to see them react.

✦

▲

●

■

60 FPS

const icons = document.querySelectorAll('.dock-icon');

icons.forEach(icon => {
  // 1. Give each icon its own magnetic field
  Dynamics.applyMagnetic(icon, {
    power: 0.5,
    radius: 60,
    stiffness: 250,
    damping: 18
  });
  
  // 2. Layer a standard scale animation on top!
  icon.addEventListener('mouseenter', () => {
    AnimX.animate(icon, { scale: 1.2, duration: 0.3, ease: 'back.out' });
  });
  icon.addEventListener('mouseleave', () => {
    AnimX.animate(icon, { scale: 1, duration: 0.4, ease: 'power2.out' });
  });
});

Properties & Methods

Configuration Options

Option	Type	Default	Description
power	number	0.5	How far the element moves toward the pointer (0.5 means it moves halfway). Max is 1.0.
radius	number	0	The size of the magnetic field in pixels. The element only reacts when the pointer is within this radius.
trigger	string | Element	target	The container that starts tracking the pointer. Usually you can leave this as the element itself.
stiffness	number	150	The tension of the spring. Higher numbers mean the element snaps to the pointer faster.
damping	number	15	The resistance of the spring. Lower numbers make the element wobbly and bouncy.
mass	number	1	The weight of the element. Heavier items react more sluggishly.
onEnter	Function	null	Fires the moment the pointer enters the element's magnetic radius.
onLeave	Function	null	Fires the moment the pointer leaves the magnetic radius.

Engine Methods

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

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