Writing a Custom Transition Function
Return CSS or tick functions from a custom transition to animate DOM entry/exit.
Writing a Custom Transition Function is a free Sveltejs Academy lesson on CoddyKit — lesson 1 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.
Custom Transitions
Beyond built-ins, you can write fully custom transition functions.
Function Signature
A transition function takes (node, params) and returns an options object.
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}Use Your Transition
Apply with transition:spin on any element.
CSS Function
Return a css(t, u) function. t goes 0..1; u goes 1..0.
JS Function (tick)
For values not animatable by CSS, return a tick function instead.
tick: (t) => node.textContent = Math.floor(t * 100) + "%";When to Use CSS vs Tick
CSS is faster (GPU-accelerated). Use tick only when CSS cannot express the change.
Easing
Apply easing inside your function or accept it as a parameter.
Delay and Duration
Return delay and duration in the options object.
Reusable Library
Build a transitions module for your design system.
Direction Awareness
The framework calls your function on enter; an opposite direction is used on exit.
Combine With in/out
You can use one custom function for enter and another for exit via in: and out:.
Quick Check
What does the css function in a transition receive?
Recap
Define custom transitions by returning { duration, css } or { duration, tick } from a function.
Frequently asked questions
Is the “Writing a Custom Transition Function” lesson free?
Yes — the full text of “Writing a Custom Transition Function” 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 “Writing a Custom Transition Function”?
Return CSS or tick functions from a custom transition to animate DOM entry/exit. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Writing a Custom Transition Function” 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
- Writing a Custom Transition Function
- Transition Parameters: node duration delay
- Creating a morphing Transition
- CSS vs JS Transitions