Custom Easing Functions
Write or import easing functions to control the pace of animations.
Custom Easing Functions is a free Sveltejs Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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; }Built-in Library
Svelte's svelte/easing exports common curves: linear, quadIn, cubicOut, elasticOut, bounceOut, etc.
Using Built-ins
Pass to a transition or tween.
import { cubicOut } from "svelte/easing";
const p = tweened(0, { easing: cubicOut });Custom Functions
Write your own to match a design.
function easeInOutSine(t) { return -(Math.cos(Math.PI * t) - 1) / 2; }Bezier Curves
Convert CSS cubic-bezier values to JS functions for precise control.
When to Use
Match the easing to the action: cubic-out for entries, cubic-in for exits, elastic-out for bouncy reveals.
Composition
Combine multiple easings for complex motion (e.g. fast start, slow end, bounce at finish).
Easing Visualizer
Use online tools like easings.net to preview curves before coding.
Accessibility
Avoid overly bouncy easings for users with motion sensitivity.
Reusability
Define custom easings in a shared module for consistent feel across your app.
Quick Check
What is the easing function input range?
Recap
Easing maps linear progress to a curve. Use built-ins from svelte/easing or write custom functions.
Frequently asked questions
Is the “Custom Easing Functions” lesson free?
Yes — the full text of “Custom Easing Functions” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Custom Easing Functions”?
Write or import easing functions to control the pace of animations. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Custom Easing Functions” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.