Use Svelte 3 transitions to gracefully show and hide DOM elements

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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

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.

egghead
egghead
~ 8 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today