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. This is 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, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
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. 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. The Sveltejs Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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.
All lessons in this course
- animate:flip for List Reordering
- The spring() and tweened() Stores
- Custom Easing Functions
- Combining transitions and animations