Spring Animations

Animations in Liquid Glass are not based on standard easing curves but on physical simulation. The Spring class drives all component animations, such as scaling, position changes, and displacement intensity.

Why Springs?

Unlike CSS transitions, spring physics allow for:

• Natural Motion: Objects feel like they have mass and momentum.
• Interruption: Animations can be interrupted and redirected without jarring jumps.
• Tactile Feedback: Components feel responsive to user input (e.g., clicking or dragging).

The Spring Class

The Spring class implements a damped harmonic oscillator. It takes three parameters:

• Initial Value: The starting point of the spring.
• Stiffness: How "strong" the spring is (higher = faster movement).
• Damping: How quickly the spring settles (higher = less overshoot/bounciness).

Example Usage

import { Spring } from '@avenra/liquid-glass';

const scaleSpring = new Spring(1, 300, 20);

// Set a new target
scaleSpring.setTarget(1.2);

// Update in a loop
function animate(dt) {
  const currentValue = scaleSpring.update(dt);
  element.style.transform = `scale(${currentValue})`;
  
  if (!scaleSpring.isSettled()) {
    requestAnimationFrame(animate);
  }
}