in: and out: for Asymmetric Transitions
Specify different transitions for entering and leaving elements.
in: and out: for Asymmetric Transitions 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.
Why Asymmetric
Sometimes you want different animations for entering vs leaving an element.
in: Directive
Apply a transition only on element insertion.
<p in:fly={{ y: 50 }}>Enter</p>out: Directive
Apply a transition only on element removal.
<p out:fade>Leave</p>Combine Both
Use both directives on one element for fully custom in/out animations.
<p in:fly={{ y: 50 }} out:fade={{ duration: 200 }}>...</p>Different Functions
The in and out transitions can be different functions entirely (fly vs fade).
Different Parameters
Pass different duration, delay, or easing for each direction.
Use in #if Blocks
The element must be created/removed reactively, as with normal transitions.
Avoid Both transition: and in:/out:
Pick either transition: for symmetric or in:/out: for asymmetric. Mixing causes conflicts.
Real Example
A toast might fly in from the top and fade out in place.
<div in:fly={{ y: -50 }} out:fade>{message}</div>Performance
Each transition costs CPU. Use sparingly on large lists.
Recap Pattern
Asymmetric transitions are a quick win for UI polish — entries feel inviting, exits feel quick.
Quick Check
What is in: vs out:?
Recap
Use in: for entries, out: for exits. Combine for asymmetric, polished transitions.
Frequently asked questions
Is the “in: and out: for Asymmetric Transitions” lesson free?
Yes — the full text of “in: and out: for Asymmetric Transitions” 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 “in: and out: for Asymmetric Transitions”?
Specify different transitions for entering and leaving elements. 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 “in: and out: for Asymmetric Transitions” 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