Custom Transitions in Svelte
From the Svelte cheat sheet · Transitions & Animations · verified Jul 2026
Custom Transitions
Creating custom transition functions
javascript
<script>
function typewriter(node, { speed = 1 }) {
const text = node.textContent;
const duration = text.length / (speed * 0.01);
return {
duration,
tick: t => {
const i = Math.trunc(text.length * t);
node.textContent = text.slice(0, i);
}
};
}
</script>
{#if visible}
<p transition:typewriter>
Hello World!
</p>
{/if}🎨 Create custom transitions with CSS or tick functions
📊 CSS-based transitions are GPU-accelerated
🔧 Tick function for JavaScript-based animations
⚡ Return duration, css, or tick properties