transition:fade and transition:fly
Apply built-in fade and fly transitions to elements controlled by {#if}.
transition:fade and transition:fly 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.
Built-in Transitions
Svelte ships several transitions in svelte/transition: fade, fly, slide, scale, blur, draw.
Import a Transition
Bring in the ones you need.
import { fade, fly } from "svelte/transition";Attach with transition:
Apply with transition: on an element controlled by {#if}.
{#if visible}
<p transition:fade>Hello</p>
{/if}Fly Transition
The fly transition moves elements from a coordinate offset to position.
{#if visible}
<div transition:fly={{ x: -200, duration: 400 }}>Slide in</div>
{/if}Parameters Object
Pass options like x, y, duration, delay, and easing.
When Triggers Fire
Transitions run on mount and unmount of the element inside {#if}, {#each}, or {#await} blocks.
Combine Transitions
Apply one transition per directive. Use in: and out: for asymmetric.
Smooth UX
Transitions make UI feel polished without writing keyframes manually.
Performance
Built-in transitions use CSS where possible for GPU acceleration.
Reduced Motion
Respect prefers-reduced-motion by conditionally applying transitions.
Easing
Pass an easing function from svelte/easing for fancier motion.
import { cubicOut } from "svelte/easing";
<p transition:fade={{ easing: cubicOut }}>...</p>Quick Check
Where do transitions run?
Recap
Import from svelte/transition; attach with transition:; pass parameter objects for control.
Frequently asked questions
Is the “transition:fade and transition:fly” lesson free?
Yes — the full text of “transition:fade and transition:fly” 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 “transition:fade and transition:fly”?
Apply built-in fade and fly transitions to elements controlled by {#if}. 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 “transition:fade and transition:fly” 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
- transition:fade and transition:fly
- Transition Parameters: duration delay easing
- in: and out: for Asymmetric Transitions
- transition:draw for SVG Paths