0Pricing
Sveltejs Academy · Lesson

Custom Easing Functions

Write or import easing functions to control the pace of animations.

What Easing Is

An easing function maps linear time (0 to 1) to a non-linear progress curve, giving animations character.

Function Signature

An easing function takes t in [0, 1] and returns adjusted progress.

function linear(t) { return t; }

All lessons in this course

  1. animate:flip for List Reordering
  2. The spring() and tweened() Stores
  3. Custom Easing Functions
  4. Combining transitions and animations
← Back to Sveltejs Academy