How to Create Transitions in Svelte

How to Create Transitions in Svelte

Ferenc Almasi β€’ 2020 September 25 β€’ Read time 1 min read
  • twitter
  • facebook

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>
Transition.svelte

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 
How to Create Transitions in Svelte
If you would like to see more Webtips, follow @flowforfrank

Looking into Svelte 3

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

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:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.