Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use Svelte 3 transitions to gracefully show and hide DOM elements

    Tomasz ŁakomyTomasz Łakomy
    sveltesvelte

    Most websites are quite static and adding some animations/transitions can improve the user experience by a lot.

    In this lesson we're going to learn how to use Svelte 3 transitions such as slide, fade and blur in order to show/hide a 'thank you' message in a form

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 We have a form where users can type in their name, surname, and also decide whether they want to give me a million dollars. If they do, we are going to use this display info message variable to display a thank-you message like this. We would like to make this a bit more flashy. After all, we're talking about a million dollars.

    0:15 In order to do that, we're going to use Svelte transitions. First, import slide from Svelte transition. Next in this h1 header, we are going to transition slide. Now, if we click on the checkbox, we are going to see this thank-you message that is going to slide up and down.

    0:32 Slide also takes a couple of parameters which allows us to control the animation. We would like to ensure that the duration of this animation is exactly five seconds. In order to do that, pass in an object and specify duration of 5,000 milliseconds. Now, if I click on this checkbox, we're going to see it's going to slide down very slowly over the course of five seconds.

    0:51 We can also delay the animation. For instance, I would like to delay this animation by two seconds after I click on the checkbox. Right now, we have the desired effect. I'm going to click on that. Now it's going to slowly appear.

    1:03 Slide isn't the only type of a transition available in Svelte. For instance, we can import fade. It's going to behave in a very similar way. I can just pass in as a transition to this header. Now, if I click on that checkbox, it's going to fade in and fade out.

    1:18 Similar to slide, we can also control the delay and the duration of the animation, like this. Fade works by changing the opacity from zero to one. If, instead, we would like to achieve a blur effect, we need to import blur from svelte-transition, and I'm going to pass as a transition to this header. Right now, if I click on this, we're going to see the blur in and blur out of the view.