
How to Create Transitions in Svelte
You can easily create transitions in Svelte by using the :in
and :out
directives:
Copied to clipboard!
<!--
To apply animations to elements when enteringor leaving the DOM,
use the in: and out: directives
-->
<script>
import { fly, fade } from 'svelte/transition';
</script>
<div class="cube"
in:fly="{{ x: -100, duration: 300 }}"
out:fade="{{ duration: 300 }}">
</div>
Within an object, you can define direction, duration, or delay. Svelte also exports 7 different predefined transitions for you to use:
fade
blur
fly
slide
scale


Resources:
π More Webtips

Rocket Launch Your Career
Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies: