Simple Svelte Transitions

Table of Contents:

• [Fade](#fade)

• [Blur](#blur)

• [Fly](#fly)

• [Slide](#slide)

• [Scale](#scale)

• [Draw](#draw)

    Svelte has its own built in transitions that are very easy to use. The transitions are very customizable, they have a couple parameters in common,

delay

,

durarion

and

easing

. All have default values that can be used with out out. Transions are a great way to give your website/app some pazza. The general way to get most of these working just to see what works for you can be something like this:

    <script>
import { fade, blur, fly, slide, scale} from 'svelte/transition';

let i = 0 

const handleClick = () => { i++ };

</script>

<div>
  <button on:click='{handleClick}'> ADD </button>
  {#key i }
    <div transition:TRANSITION_NAME="{{duration: 300}}">
      { i }
    </div>
  {/key}
</div>

To test this you would change

TRANSITION_NAME

to one of the imported transitions. This would render a number and add to

i

, the change would show the transition. Adding some CSS rules to keep the

fixed

would make some transitions look better, such as scale and blur. This example is a simple property change that trigger the rerendering of the element, but you could do this with components as well.

#Fade

    Fade can take in parameter of

delay

,

duration

, and

easing

. The delay is how many milliseconds that before the transition starts, the default is set at 0. Duration is how long the transition last for in milliseconds. The easing takes in a svelte easing function more information can be seen

here

. An example of fade looks like this:

Tutorial

Docs

#Blur

    Blur blurs in/out the element that is being rendered. This are some more paramters that blur takes in,

delay

,

durarion

and

easing

just like fade but the other 2 are

opacity

and

amount

. The opacity is the will animate in and out of, and amount is the size of the blur.

Docs

#Fly     The Fly transition moves one element from an x and y position into frame over last element. This can take a `in:fly` and an `out:fly` with parameters passed in. `delay`, `duration`,`easing` `opacity` and adding a `x` and `y`. X and Y move newly rendered element from and into the position using the axis. You can make it look like this:

Tutorial

Docs

#Slide       Slide renders element in and out of the frame. Like Blur it takes in `delay`, `duration` and an `easing` function. This is a very simple transition to implement and simple looking animation. An example looks like this:

Docs

#Scale     Scale renders element in and out from the z index and grows. It takes in `delay`, `duration`, an `easing` function, `start` and `opacity`. Start scales the element initial size. An example looks like this:

Docs

#Draw     The draw animation is a one a little more complex but can be very fun to implement. This is used for drawing out SVG in a path. It can be used in something like an icon or an image on the page that you would would to give more of a fancy and fun look. Parameters that it takes in are `delay`, `speed`, `duration` and an `easing` function. You Svg needs a path and not just a drawn on shape or icon. The transition is invoked in the path parameter in the SVG. A simple implementation looks like this:

Docs

    This is just a simple introduction in svelte transitions. To urge you take take a deeper dive into the tutorials that svelte has to offer. The REPL that they have to show you how to use the transition is an easy way to test a transition before implementation. Playing with Animations and getting a feel for them and understanding how to use it and really getting a feel for what it looks like is important.