0Pricing
Sveltejs Academy · Lesson

Interpolation Functions

Customize how tweened stores interpolate between complex values like colors and arrays.

Custom Interpolation

Tweened and spring can animate non-numeric values with a custom interpolate function.

Function Signature

The interpolate function takes start and end values and returns a function that maps progress to interpolated value.

function lerp(a, b) { return (t) => a + (b - a) * t; }

All lessons in this course

  1. The spring() Store: Physics-Based Animation
  2. The tweened() Store: Duration and Easing
  3. Interpolation Functions
  4. Animating SVG Paths with Motion
← Back to Sveltejs Academy